렌더링 렌더링이란 브라우저가 웹 문서를 화면에 그리는 과정을 말한다. 클라이언트가 URI를 통해 서버로부터 HTML을 비롯한 리소스를 다운로드 받으면 브라우저는 웹 문서를 화면에 그리기 위해 렌더링을 수행한다. 브라우저마다 렌더링을 수행하는 렌더링 엔진과 자바스크립트 코드를 실행하는 자바스크립트 엔진이 존재한다. 렌더링 과정 1. DOM 트리, CSSOM 트리 생성 클라이언트가 리소스를 다운로드 받으면 브라우저는 렌더링을 위해 먼저 HTML 코드로부터 DOM 트리, CSS로부터 CSSOM 트리를 생성한다. DOM 트리 생성 CSSOM 트리 생성 2. 렌더링 트리 생성 DOM 트리와 CSSOM 트리를 만든 후, 이 둘을 결합해서 렌더링 트리를 생성한다. 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만..
CSS CSS(Cascading Style Sheet)는 문서의 디자인을 담당하는 언어이다. 다음과 같이 사용되어진다. 선택자 { 속성: 속성값; } CSS 선택자 CSS 선택자는 CSS 디자인을 적용할 태그를 선택하는 것을 말한다. type, id, class 선택자가 있으며 그 외에도 자식 선택자, 자손 선택자 등 여러 선택자들로 태그를 선택할 수 있다. type 선택자 h1 { color: red; } 모든 h1 태그에 디자인을 적용한다. id 선택자 #bg { background-color: yellow; } 태그의 id 속성 값이 bg인 태그에 디자인을 적용한다. id 속성값은 문서 내에서 유일해야된다. class 선택자 .bg { background-color: yellow; } 태그의 cla..
Position 속성 포토샵을 보면 여러개의 레이어(layer)를 겹쳐 하나의 이미지를 만든다. CSS도 마찬가지다. 여러 개의 태그를 겹쳐 웹 디자인을 만들어낸다. 이를 위해 CSS는 position 속성을 제공한다. position 속성은 태그의 상태를 2차원 혹은 3차원으로 만들어주는 속성이다. position 속성값에는 static, fixed, relative, absolute 4가지 값이 있다. static 속성값은 태그를 2차원으로 만들며 fixed와 absolute 속성값은 태그를 3차원으로 만들고 relative 속성값은 태그를 2,3차원으로 만들어준다. 2차원의 태그들끼리는 서로 영향을 준다. 즉 2차원의 특징을 갖는 태그끼리 마진 병합이 발생할 수도 있으며 부모가 높이를 갖고 있지 않..
CSS 레이아웃 배치 웹페이지를 만들 때 HTML의 핵심은 header, section, footer, div 이러한 태그들을 블록쌓듯 쌓아 문서의 구조를 만드는 것이라면 CSS의 핵심은 이러한 태그들을 원하는 장소에 배치해 문서의 디자인을 만드는 것이라 생각한다. 이 글에서는 CSS 레이아웃 배치를 위한 몇 가지 개념을 소개한다. 박스 모델 (Box model) 모든 HTML 태그는 박스 모델로 구성되어 있다. 박스 모델의 박스는 margin, border, padding, content 네 가지 요소로 크기와 간격을 조정할 수 있다. margin : border(테두리) 속성을 기준으로 바깥쪽 영역을 의미한다. margin-top, margin-bottom, margin-left, margin-rig..
