웹 브라우저 작동 방식 - CSS 구문 분석(4부, 그림 포함)⏳🌐

HTML이 구문 분석된 후 parse the CSS(외부 CSS 파일 및 스타일 요소에 있음) 및 CSSOM tree(CSS 개체 모델)을 빌드할 시간입니다.

4. CSS 파싱

브라우저가 CSS 스타일시트(외부 또는 포함됨)를 만나면 텍스트를 레이아웃 스타일 지정에 사용할 수 있는 것으로 구문 분석해야 합니다. 브라우저가 CSS를 변환하는 데이터 구조를 CSSOM이라고 합니다. DOM과 CSSOM은 둘 다 트리라는 점에서 유사한 개념을 따르지만 different data structures 입니다. HTML에서 DOM을 빌드하는 것과 마찬가지로 CSS에서 CSSOM을 빌드하는 것은 렌더링 차단 프로세스로 간주됩니다.

토큰화 및 CSSOM 구축

HTML 구문 분석과 유사하게 CSS 구문 분석은 토큰화로 시작합니다. CSS 파서는 바이트를 가져와 문자, 토큰, 노드로 변환하고 마지막으로 CSSOM에 연결합니다. 브라우저는 selector machting라는 작업을 수행합니다. 이는 각 스타일 세트가 페이지의 모든 노드(요소)와 일치함을 의미합니다.



브라우저는 노드에 적용할 수 있는 가장 일반적인 규칙으로 시작합니다(예: 노드가 body 요소의 자식인 경우 모든 본문 스타일은 해당 노드에서 상속됨). 그런 다음 보다 구체적인 규칙을 적용하여 계산된 스타일을 재귀적으로 구체화합니다. 이것이 스타일 규칙이 cascading라고 말하는 이유입니다.

아래에 HTML과 CSS가 있다고 상상해 보십시오.

body {
  font-size: 16px;
  color: white;
} 

h1 {
  font-size: 32px;
}

section {
  color: tomato;
}

section .mainTitle {
  margin-left: 5px
}

div {
  font-size: 20px;
}

div p {
  font-size:  8px;
  color: yellow;
}

이 코드의 CSSOM은 다음과 같습니다.



위의 스키마에서 중첩된 요소는 inherited styles(부모로부터 - 예: h1는 body에서 색상을 상속하고 section는 body에서 글꼴 크기를 상속함) 및 their own styles (부모에서 상속된 규칙을 덮어쓸 수 있는지 여부 - 예: p는 div에서 상속된 색상과 글꼴 크기를 모두 덮어쓰고 mainTitle는 부모 노드에서 왼쪽 여백을 가져오지 않습니다. ).

CSS에 대한 여러 소스를 가질 수 있고 동일한 노드에 적용되는 규칙을 포함할 수 있으므로 브라우저는 결국 어떤 규칙을 적용할지 결정해야 합니다. 이때 specificity가 작동하며 이에 대한 자세한 내용을 보려면 this page을 방문하십시오.

당신이 공항에 있고 친구 John을 찾고 있다고 상상해보세요. 그의 이름을 불러 그를 찾고 싶다면 "John"을 부를 수 있습니다. 한 명 이상의 John이 동시에 공항에 있을 가능성이 있으므로 모두 응답할 수 있습니다. "John Doe"가 단순히 "John"보다 더 구체적이기 때문에 "John Doe"라고 외칠 때 친구를 찾을 수 있는 더 좋은 기회를 가질 수 있도록 전체 이름을 사용하여 친구에게 전화하는 것이 더 나은 방법입니다.

같은 메모에서 다음 요소가 있다고 가정해 보겠습니다.

<p>
  <a href="https://dev.to/">This is just a link!</a>
</p>

이러한 CSS 스타일:

a {
   color: red;
}

p  a {
   color: blue;
}

브라우저가 어떤 규칙을 적용할 것이라고 생각하십니까? 답은 all anchor tags inside a paragraph 선택자 조합이 all anchor tags 선택자보다 더 구체적이기 때문에 두 번째 규칙입니다. 특이성을 가지고 놀고 싶다면 이것을 사용할 수 있습니다 Specificity calculator .

중요한
CSS 규칙은 오른쪽에서 왼쪽으로 읽습니다. 즉, section p { color: blue; } 와 같은 항목이 있는 경우 브라우저는 먼저 페이지에서 모든 p 태그를 찾은 다음 이러한 p 태그 중 하나라도 section 부모로 태그를 지정합니다. 이 경우 CSS 규칙을 적용합니다.

참조 자료:

A brief history of CSS until 2016

MDN Web Docs