html,head,body의 차이
html태그, head태그 그리고 body에 대해 은근 정리가 안 된 것 같아서 게시글로 정리하려고 한다.
html
<html>은 HTML 문서의 루트(최상단 요소)를 나타내며 루트 요소라고 부른다. 모든 요소들은 <html> 요소의 후손이여야 한다.
하나의 <head> 요소와 하나의 <body> 요소를 가진다.
head
HTML <head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다.
<body> 요소와는 다르게 페이지에 표시되지 않는다.
대신 브라우저나 웹페이지를 구성하는 metadata를 포함한다.
<link>는 항상 <head>에 위치해야한다.
페이지는 HTML과 CSS를 파싱하고 나서 렌더링을 시작하므로 항상 <head>에 위치하여 빠르게 로드되어야 한다.
또한 렌더링 전에 초기화와 같은 가벼운 <script>의 경우 <head>에 넣기도 한다.
body
HTML <body> 요소는 HTML 문서의 내용을 나타낸다. 한 문서에 하나의 <body> 요소만 존재할 수 있다.
<script>는 css나 html을 조작할 수 있기 때문에 다운로드하고 실행하는 동안 DOM트리를 위한 파싱 작업을 멈춘다.(하지만 defer, async등의 속성을 사용하여 제어할 수 있다.)
또한 <script>는 무겁다.
때문에 <script>태그는 대부분의 경우 <body>태그의 맨 아래 넣는다.
느낀점
기초는 이렇지만 다크모드 깜빡임 현상을 해결하면서는 <body>의 내용을 렌더링 하기 전에 렌더링 블록 요소인 <script>를 미리 로드하고 body의 최상단에서 호출하였다.
다크모드 깜빡임 현상을 해결하며 <script>와 <html>,<head>,<body>에 대해 더 깊게 이해하게 된 것 같다..!