CS

브라우저가 화면을 표시하는 과정4 : Parsing the CSS

변기원 2023. 9. 10. 15:59

html이 파싱이 되었다면 css를 파싱하고 cssom을 만들 차례입니다.

브라우저가 외부, 혹은 내부의 css 스타일 시트를 만나면 텍스트를 브라우저가 레이아웃을 꾸미는데 유용한 구조로 파싱 합니다.

html을 DOM으로 바꾸는 것처럼.. 브라우저는 css를 CSSOM으로 바꿉니다. DOM과 CSSOM은 트리라는 구조를 가진 비슷한 개념이지만 서로 다른 자료구조를 가집니다. css에서 cssom을 만드는 과정은 랜더링을 차단하는 프로세스로 간주됩니다. 

html을 파싱 하는 과정과 비슷하게 css 파싱도 토크나이징으로 시작합니다. 바이트 데이터를 전달받아서 토큰으로 변경하고 node를 만들고 cssom으로 바뀝니다. 

브라우저는 selector matching이라는 것을 수행하는데, 각 스타일 세트가 페이지의 모든 노드 요소들과 일치함을 의미합니다.

(css 셀렉터가 dom요소의 노드들과 일치하는지 본다는 뜻인 듯) 

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;
}

브라우저는 각 노드에 적용할 수 있는 가장 일반적인 규칙부터 시작합니다. (위와 같은 css가 있을 때 body 셀렉터가 가장 일반적이라고 설명하는 것 같습니다). 그 뒤에 조금 더 구체적인 규칙들로 스타일을 적용해 나갑니다. 그래서 우리가 스타일 규칙이 cascading(계단식)하다고 하는 이유입니다. 위 css로 만들어진 cssom을 시각적인 이미지로 그려보겠습니다.

위 스키마에서 중첩된 요소에는 상속된 스타일과 자신이 직접 가진 스타일이 모두 있습니다. 예를 들면 h1태그는 body로부터 상속받은 color: 'white'를 가지고 있고, section은 body로부터 상속받은 font-size:'16px'을 가지고 있습니다. 반면에 h1은 직접 가지고 있는 스타일로 font-size:32px을 가지고 있으므로 상속된 font-size속성을 overwrite 할 수 있습니다. div 내부 p 태그는 font-size와 color를 모두 부모(div), 부모의 부모(body)로부터 상속받았지만 스스로 가진 스타일로 모두 overwrite 하였습니다. mainTitle클래스의 경우에는 font-size와 color는 상속받아서 사용하고 margin-left속성만 가지고 있네요.

 

동시에 하나의 노드에 여러 css소스가 있고, 해당 노드에 적용되는 여러 규칙이 있을 수 있습니다. 그래서 브라우저는 최종적으로 어떤 규칙을 적용시킬지 결정해야 합니다. 이때 specificity라는 특성이 작용하게 됩니다. 이에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity를 참조해 주세요.

 

공항에서 john을 찾을 때 john이라고 소리치는 것보다 john doe라고 소리치는 게 훨씬 원하는 사람을 찾을 확률이 높습니다.

이와 같은 관점으로

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

이런 코드가 있다고 생각해 봅시다. 그리고 이에 대한 css 스타일은

a {
   color: red;
}

p  a {
   color: blue;
}

위와 같습니다. 브라우저가 a태그에 어떤 color를 적용할까요? 정답은 두 번째 규칙입니다. 모든 anchor태그를 가리키는 것보다는 paragraph태그 내부의 anchor태그가 더 구체적이기 때문입니다.