공부로그

* 페이지 작성에 있어서 보조해주는 도구 * HTML과 같이 사용 가능 ui.toast.com/tui-editor TOAST UI :: Make Your Web Delicious! The TOAST UI Is Free Open-source JavaScript UI Libraries Maintained By NHN. ui.toast.com

1) root에 선언해서 사용한다. ex) :root { } 2) `--`를 사용해서 변수 선언 ex) --a:10px; 3) 사용시 ex) var(--a);

1) HTML의 레이아웃 구조를 다양하게 위치 및 구성시킬 수 있는 속성 2) 개념 - container : items를 감싸는 부모 요소 - items : items를 정렬하기 위해서는 container가 필수 3) container 속성 - display - flex-flow : flex-direction, flex-wrap - justify-content - align-content - align-items 4) items 속성 - order - flex : flex-grow, flex-shrink, flex-basis - align-self

* 요소가 공백을 처리하는 법을 지정 1) normal : 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리. 자동 줄바꿈 2) nowrap : 연속 공백을 하나로 합침. 줄 바꿈은 요소에서만 일어납니다. 3) pre : 연속 공백 유지. 줄 바꿈은 개행 문자와 요소에서만 일어납니다. 4) pre-wrap : 연속 공백 유지. 줄 바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄 바꿈 5) pre-line : 연속 공백을 하나로 합침. 줄 바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄 바꿈 6) break-spaces : 아래의 요소 외에는 pre-wrap과 동일 - 연속 공백이 줄의 끝에 위치하더라도 공간을 차..

codepen.io/ty01059/pen/ZEpExby menuebar_ver. ... codepen.io

* div 태그와 id를 사용해서 레이아웃을 잡는 연습 codepen.io/ty01059/pen/mdrddXJ to2.kr/bM9 ... codepen.io * div 외에 nav 태그 또는 section을 사용하면 id를 사용하지 않아도 레이아웃을 잡을 수 있음.

** HTML 1. div : 웹 사이트의 레이아웃을 만들때 주로 사용 2. section : HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용 3. article : 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담음(글, 포럼, 뉴스, 기사) 4. nav : 문서의 부분 중 현재 페이지 내 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄 (메뉴, 목차, 색인...) ** CSS 1. display : 요소를 어떻게 보여줄지 결정 ( block, inline, inline-block, none) 2. width : 속성의 너비 3. height : 속성의 높이 4. background-color : 배경색상 5. font-family : 폰트 6. font-size : 글씨 크기 7. fo..