렌더링 렌더링이란 브라우저가 웹 문서를 화면에 그리는 과정을 말한다. 클라이언트가 URI를 통해 서버로부터 HTML을 비롯한 리소스를 다운로드 받으면 브라우저는 웹 문서를 화면에 그리기 위해 렌더링을 수행한다. 브라우저마다 렌더링을 수행하는 렌더링 엔진과 자바스크립트 코드를 실행하는 자바스크립트 엔진이 존재한다. 렌더링 과정 1. DOM 트리, CSSOM 트리 생성 클라이언트가 리소스를 다운로드 받으면 브라우저는 렌더링을 위해 먼저 HTML 코드로부터 DOM 트리, CSS로부터 CSSOM 트리를 생성한다. DOM 트리 생성 CSSOM 트리 생성 2. 렌더링 트리 생성 DOM 트리와 CSSOM 트리를 만든 후, 이 둘을 결합해서 렌더링 트리를 생성한다. 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만..
WEB 웹의 가장 기본적인 기술은 HTTP, URI, HTML이다. HTTP : 웹의 자원(리소스)을 교환하기 위한 프로토콜 HTML : 웹 페이지 포맷 URI : 웹의 리소스를 가리키는 식별자 웹을 정보 시스템으로 본다면 하이퍼미디어 시스템, 분산 시스템이라는 두 가지 측면으로 볼 수 있다. 하이퍼미디어 시스템 : 하이퍼미디어란 텍스트, 이미지, 영상 등 다양한 미디어를 하이퍼링크(링크)로 연결해 구성한 시스템이다. 웹 페이지에는 다른 웹 페이지와 이미지, 동영상의 링크가 포함된다. 사용자는 브라우저를 통해 그 링크로 계속 이동하여 정보를 얻을 수 있다. 분산 시스템 : 웹의 자원은 한 곳에 모여있지 않고 전 세계에 퍼져있다. 즉 웹은 수 많은 서버로 구축된 분산 시스템이다. REST의 등장 2000년..
정적 페이지 초기 웹 서버는 페이지의 내용이 변하지 않는 정적 페이지만을 제공했다. 즉 파일의 내용이 변하지 않는 정적 리소스 (HTML, CSS, JS ··)만을 제공했다. 이 방식은 매우 쉽고 빠르지만 아래의 문제들이 발생한다. 페이지 수만큼의 정적 리소스가 웹 서버내에 저장되어야 한다. 만약 만 개의 페이지를 제공한다면 만 개의 HTML 파일이 존재해야한다. 저장 용량에 많은 부분을 차지할 뿐만 아니라 수정도 힘들다. 만약 홈페이지 로고를 바꾼다면 만 개의 HTML 파일을 모두 수정해야 하는 대작업이 벌어진다. 사용자가 페이지를 추가 할 수 없다. 사용자가 페이지를 추가하기 위해서는 웹서버 관리자에게 페이지를 구성하는 리소스를 줘야한다. 동적 페이지 이러한 문제를 해결하기 위해 웹 서버는 페이지의 ..
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..
