<Introduction>

CSS을 HTML에 적용하는 3가지 방법에 대해 정리하였습니다. 이번에는 CSS가 실제로 어떻게 작동하는지 알아보도록 하겠습니다. 

2022.01.17 - [Programming/HTML] - [HTML] CSS 적용 방식

<HTML/CSS 작동 과정>

우리가 보고 있는 HTML은 "브라우저" 가 HTML 문서를 로드하여 표시하게 됩니다. 이때, 문서의 콘텐츠와 해당 스타일 정보를 결합해서 표시해야합니다. 나열된 단계에 따라, 브라우저가 HTML, CSS를 로드하여 사용자에게 표시되는 과정을 단순화한 단계입니다.

주요 전달하고 싶은 내용은 "DOM(Document Object Model)"이라는 컴퓨터 메모리의 문서를 거친다는 점입니다!

1. 브라우저가 html 문서를 서버에서 받아서 로드를 합니다. 
2. html 문서를 parsing 하여 DOM 으로 변환합니다. 
3. 포함된 이미지 및 비디오와 같은 html 문서에 연결된 대부분의 리소스와 연결된 CSS를 가지고 옵니다.
4. 브라우저는 가져온 CSS 구문을 분석하고, 규칙에 따라 정렬하여 "Render tree" 합니다.(tree 구성함)
5. Render tree는 규칙이 적용된 후 표시되어야 하는 구조에 맞게 배치됩니다.
6. 시각적인 으로 페이지에 표시가 됩니다. (Painting 단계라고 합니다)

<DOM (Document Object Model) 이란>

문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface 입니다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 개발자가 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있습니다. 

<DOM의 실제 표현>

다음의 html 코드를 DOM으로 어떻게 표현되는지, Render tree를 알아보겠습니다. 

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

DOM이 해석하기에는, <p>  태그는 부모에 해당되고 자식에 해당되는 텍스트 태그가 3개의 <span> 태그로 구성되어 있습니다. 이를 DOM에서는 아래와 같이 구성하게 됩니다. 

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

브라우저는 HTML 문서를 받고 나서 DOM 을 작성한 다음 그로 부터 CSS 구문을 분석합니다. 

CSS에서 사용하는 선택자를 기준으로 빠르게 정렬이 가능하며 위의 예시에서 span이란 선택자에 정의된 속상값에 의해 HTML에 적용되어 시각적으로 표현이됩니다. 

<Reference>

https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS

https://www.w3schools.com/css/css_comments.asp