몰까로그

PC로 개발자도구를 활용해 소스코드를 보는 것처럼 모바일로 소스코드를 보고 싶은 경우 다음과 같은 방법을 사용해 볼 수 있습니다. 1. 안드로이드 운영체제 -> 웹사이트 주소 앞에 view-source 넣기 ex) view-source:https://www.daum.net/ 2. ios 운영체제 - 사파리 브라우저에서 아무 웹페이지나 책갈피에 추가 - 책갈피 편집으로 사이트 이름 아무거나로 변경 후 사이트 주소에는 아래의 주소 입력한 뒤 저장 javascript:var%20sourceWindow%20=%20window.open('about:blank');var%20newDoc%20=%20sourceWindow.document;newDoc.open();newDoc.write(''%20+%20'Source%..

밝은 빛은 눈을 너무 괴롭힌다.. eclipse 다크 모드 설정하는 방법에 대해 알아보자. 1. 상단의 'Window' 탭 클릭 2. Window탭의 'Preferences' 클릭 3. Preferences 창에 'Appearance' 검색해서 클릭 (a만 쳐도 뜬다) 4. Theme를 Dark 모드로 선택 후 Apply and Close (Apply 버튼 누른 후 괜찮은지 보고 닫아도 됨) +) 다크 모드가 되긴 했는데 위쪽 탭이 아직 하얗다면 아래쪽에 뜬 안내문구의 restart를 클릭하거나 프로그램을 껐다가 켜면 된다 자란~~ 이클립스 다크 모드 설정 끝!

JSP에서 페이지를 모듈와 할 때, 헤더와 푸터 페이지를 포함시키는 코드를 작성하는 방법으로 크게 두가지가 있습니다. 하나는 액션 태그를 활용하는 방법이고, //page : 삽입할 페이지의 주소 기술, 상대 경로와 절대 경로 둘 다 가능 //flush : 출력 버퍼에 저장되어 있는 데이터 내어줄이 설정 다른 하나는 iclude 지시자를 활용하는 방법입니다. //file에 연결할 페이지 주소 기술 두 방법은 결과는 같지만 동작하는 원리가 다릅니다. include 지시자는 연결한 페이지를 현재 페이지와 하나로 합쳐 컴파일해 실행하는 구조입니다. 포함되는 페이지를 페이지의 일부분으로 구성할 수 있습니다. 서로간에 변수 공유도 가능합니다. 반면 액션 태그는 컴파일할 때 합치지 않고 제어권한이 지정한 페이지로 갔..

'반응형 웹'이란? PC 컴퓨터, 스마트폰, 태블릿 등 접속하는 기기의 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지를 말한다. Daum 화면의 모바일 웹페이지와 PC 웹페이지를 비교해보면 이해가 쉽다. 반응형 웹을 만드려면 (1) 어떻게 다르게 구성할건지, (2) 몇개의 다른 화면을 만들건지, (3) 각 화면의 넓이는 몇으로 설정할건지 정해야 한다. 어느정도 미리 구상을 해두면 그림을 그려가듯이 코드를 짤 수 있다. 데스크탑에서 모바일로 갈수록 화면의 넓이는 줄어든다. 좁은 화면을 가로로 쪼개 섹션을 나누면 글자며 사진이며 잘려서 가시성이 떨어진다. 때문에 모바일 화면에서는 아이템들을 세로로 길게 나열해 배치하는 게 좋다. 혹은 슬라이드 형태로 만들면 깔끔하다. 반응형 웹페이지는..

구글폰트에서 제공하는 아이콘을 사용해보자. 구글폰트 바로가기 ↓↓↓↓↓↓↓↓↓ https://fonts.google.com/icons?preview.size=37 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com >>>>>구글아이콘 사용하기

구글에서 제공하는 브라우저 폰트를 사용해보자. 구글폰트 바로가기 ↓↓↓↓↓↓↓↓↓ https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com >>>>> 폰트 사용하기

Git이란 내 local 컴퓨터에서 수정한 내용, 과거 히스토리를 모두 기록해두는 시스템이다. Github는 로컬이 아닌 cloud에서 이를 관리하는 시스템으로, 다른 사람들과 코드 공유가 가능하고 협업에 용이하다. terminal을 열고 명령어를 입력해 git을 관리한다. vscode를 사용한다면 ctrl + ` 를 눌러서 터미널 창을 열 수 있다. ☆ Local부터 Github까지 가려면? 내 컴퓨터에서 그냥 파일을 만들고 작업을 하면 그 파일은 local의 working directory에 저장이 된다. git을 이용해 기록하고 싶다면 우선 저장소를 생성해야 한다. git init : git 저장소를 생성하는 코드 git status : 현재 git의 상태 나타냄 저장소를 생성했지만 아직 git에 ..

display: flex; 레이아웃 배치를 위한 전용 기능으로 고안된 기능. 인터넷 익스플로러 구 버전에서는 지원 안 되기도 함. IE 10, 11 지원. box1 box2 box3 위와 같이 html 구조를 설정해, box들을 가로로 나란히 병렬하고 싶을 때. 부모요소인 container에 display: flex;를 적용해 사용. container가 flex의 영향을 받는 공간이며, 그 안에 자리잡는 item들이 설정한 속성에 따라 배치됨. ***** flex 적용 속성 ***** ◎ item 적용 속성 (1) flex-basis // 아이템 기본 크기 설정 flex-direction이 row일 때는 width를, column일 때는 height를 설정. width를 설정하면 아이템이 width보다 ..

display: flex; 레이아웃 배치를 위한 전용 기능으로 고안된 기능. 인터넷 익스플로러 구 버전에서는 지원 안 되기도 함. IE 10, 11 지원. box1 box2 box3 위와 같이 html 구조를 설정해, box들을 가로로 나란히 병렬하고 싶을 때. 부모 요소인 container에 display: flex;를 적용해 사용. container가 flex의 영향을 받는 공간이며, 그 안에 자리 잡는 item들이 설정한 속성에 따라 배치됨. ***** flex 적용 속성 ***** ◎ container 적용 속성 1) display: flex; // flex 선언 .container { display: flex; } 가로 방향으로 배치. item들의 width는 item이 가진 내용물 만큼, he..

빠른답변>> 더보기 더보기 margin-left: auto;를 마지막 자식박스에 적으면 된다. 웹페이지 스크롤을 맨 밑으로 내리면 보통 '페이지 로고', '주소 및 연락처', '저작권 표기' 등이 자리하고 있습니다. 대한민국 청와대 홈페이지는 왼쪽에는 로고와 각종 SNS연결 아이콘이, 가운데에는 연락처 정보가, 오른쪽에는 하단메뉴와 기타설명, 각종 인증 마크들이 있습니다. 저작권 표시는 그 밑에 해두었네요. 웹 편집기(여기서는 HTML5를 사용했습니다.)로 이를 구현해본다면, 각각의 내용을 크게 네가지 div 박스에 담아 위치를 조절할텐데요. 맨 밑의 저작권 표시는 냅두고, 위에 3개 박스의 display 설정을 flex로 선언해 가로로 정렬할 수 있겠습니다. 연습을 위해 html문서의 부분을 작성하면 ..