웹페이지는 브라우저를 통해 보여지게되는데 이때 이 브라우저가 웹페이지를 그리는 방법에 대해 알아보자. 브라우저가 하나의 화면을 그려내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 이를 수행하는 주체는 렌더링 엔진이다. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 나태내는 일을 담당하는데, HTML, CSS, JavaScript등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀단위로 나타낸다. 브라우저마다 사용하는 렌더링 엔진이 다르고 이 때문에 같은 소스가 브라우저마다 다르게 그려지는 크로스 브라우징이슈가 발생한게 된다. (크로스 브라우징이슈는 자바스크립트 엔진이 달라 발생하기도 한다.) 다시 렌더링 과정으로 돌아와서 위의 그림을 요약하자면 아래와 같은..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 인터넷 익스플로러 관련 CSS문제 해결 인터넷 익스플로러의 초기 버전에서 CSS구현체는 버그 투성이었고 표준에 벗어난 방식으로 동작했으며 W3C 표준을 명백히 잘못 이해한 결과물이었다. 인터넷 익스플로러 6과 이후 버전에서는 이러한 '쿼크'를 대부분 수정했지만 웹 브라우저가 갑자기 표준 호환 쪽으로 바뀌면 기존 웹 사이트가 망가질 수 있다. 이에 대한 해결책은 독타입을 변환해 디자이너들이 기존 쿼크를 지원할지 표준을 지원할지 또는 둘 사이의 하이브리드 버전을 지원할지 지정하게 하는 것이었다. 이론상으로 모드를 설정하기 위해 할 일은 독타입을 선언하는 것밖에 없다. 쿼크 모드 페이지가 표준 호환 페이지가 아니거나 ..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. HTML이란 HyperText Markup Language 페이지 내 엘리먼트를 정의해 웹에서 사용하는 문서의 구조를 생성하는 태그 시스템. 기본 HTML 문서 구조 - DocType() : 문서에서 사용하는 마크업 언어의 종류를 설정한다. 브라우저가 HTML코드를 빠르고 정확하게 해석하려면 DocType을 포함하는 것이 중요하다. - 헤드() : 제목, 메타태그 같은 페이지 관련 정보를 포함한다. 외부 CSS와 자바스크립트 파일에 대한 링크도 헤드에 위치시킨다. - 바디(): 웹 브라우저 창에 실제 보이는 엘리먼트들을 포함한다. 네비게이션, 헤더, 단락,리스트, 테이블, 이미지 등이 여기에 해당한다. HTML 엘..
