html3 [HTML] Reflow와 Repaint 브라우저는 어떻게 화면에 요소를 그릴까브라우저에서 DOM API.를 통해 DOM트리나 CSSOM트리를 조작하게 되면, DOM트리와 CSSOM트리는 결합하여 렌더트리를 형성합니다. 이후 브라우저는 렌더 트리를 기반으로 화면에 요소를 그리기 위해 레이아웃 계산(reflow)와 페인팅 과정(repaint)을 거치게 됩니다. reflowreflow는 DOM요소의 위치와 크기를 계산하는 단계입니다. 다음과 같은 경우 reflow가 발생하게 됩니다. DOM 노드가 추가/삭제 될 때요소의 크기가 변경될 때브라우저 창의 크기가 변경될 때폰트 크기 변경등 레이아웃에 영향을 주는 스타일이 변경될 때reflow는 레이아웃 전체에 영향을 주기 때문에 비용이 큰 작업에 속합니다. 예를들어, 브라우저 resizing이 많이.. 2026. 1. 20. [HTML] <head> 태그란? 메타데이터와 meta 태그 정리 태그란? HTML의 태그 내부에서 적힌 요소는 웹 브라우저에 렌더링되지 않습니다. 태그의 목적은 메타데이터를 담는 것이 주 목적인데요, meta태그는 meta요소를 담은 태그를 말합니다. 메타데이터란 무엇인가? 더 직관적으로 말해도 데이터에 관한 데이터정도로 설명 할 수 있는데, 비유를 하자면 웹 브라우저가 라면봉지하나라고 가정하면, 라면봉지에는 라면의 조리법이나, 성분표, 회사명 등등이 담겨있습니다. 이렇게 라면을 이해하기 위해 반드시 필요한 정보를 설명 하는것을 메타데이터라고 할 수 있습니다. head에 담기는 정보 태그는 해당 브라우저의 제목을 보여줍니다. 여기서 제목이란 탭상에 존재하는 제목을 이야기합니다. 그리고 또 하나의 정보가 보이나요? 글쓰기에는 지구본모양의 아이콘이 보이지만 .. 2025. 12. 21. [HTML] DOCTYPE은 왜 필요한가? DOCTYPE이란 ? DOC타입은 HTML로 작성된 문서의 모든에서 찾을 수 있는 문서 타입 정의키워드입니다. MDN문서에 따르면 DOCTYPE의 목적은 브라우저가 문서를 렌더링할 때 "quirks mode"로 바뀌지 않게 하는것이 유일한 목적이라고 적혀있는데요. "quirks mode"를 이해하기 위해선 과거의 웹 페이지 표준방식에 대해 짚고 넘어가야합니다. "quirks mode" 과거의 웹은 주로 Netscape Navigator와 Internet Explorer가 있었습니다. 이때는 아직 웹 표준이 정의되지 않아. 두가지 버전으로 웹 페이지를 구현해야했습니다. 이후 시간이 흘러 W3C에서 웹 표준을 정의하고, 이를 모든 웹에 적용했어야했는데, 웹 표준에 맞춰 페이지를 작성하면 기존의 웹 사이트.. 2025. 12. 21. 이전 1 다음
