white-space 사전적 의미로 white space는 '여백'을 뜻함. html에서는 공백의 의미 태그 작성시 생기는 공백 줄바꿈 (line break) 들여쓰기 (tab) 공백 (space) html 작성시 공백을 아무리 많이 입력해도 1개만 표현됨. 하나 이상의 공백을 표현하기 위해서는 를 사용해야함. 또는 태그를 사용하면 공백이나 줄바꿈을 있는 그대로 표시 white-space 속성 값 normal (default) 공백을 여러개 넣어도 1개만 표시. 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap) nowrap 공백을 여러개 넣어도 1개만 표시. 글이 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시 pre 공백을 코드에 있는 그대로 표시. 태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈 되지 ..

Reflow 대화형 사이트에서 업데이트 한 후와 같이 browser가 웹 페이지의 일부 또는 전부를 다시 처리하고 그려야할 때 Reflow가 발생한다. 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받는 모든 노드(자신, 자식, 부모, 조상 등 = 결국 모든 노드)의 수치를 다시 계산하여(Recalculate) Render 트리를 재생성하는 과정 Repaint (=Redraw) Reflow 과정이 끝난 후, 재생성된 Render 트리를 다시 그리는(paint) 과정 Reflow 과정이 일어나는 상황 Window Resizing Viewport 변화는 Global Layout에 영향 Font 변경 height 계산에 영향을 주므로 Global Layout에 영향 스타일 추가 또..

선택자 우선순위 순위 선언방식 설명 예시 1 !important 우선순위 최상위 명령어. 속성값 바로 뒤에 넣는다. p { color: red !important; } 2 inline style html 문서에서 tag 내에 style을 정의한 것 3 id Selector tag 내에 id를 정의한 후, #id 으로 선택 제목 #title { color: red; } 4 class Selector tag 내에 class를 정의한 후, .class 으로 선택 부제목 .subtitle { color: red; } 5 tag Selector tag 요소를 선택자로 사용 p { color: red; } 6 universal Selector asterisk(*)로 요소 전체를 선택 * { color: red; }..