2022-02-16 17:10 작성

CSS 작동 방식

Table of contents

CSS 작동 방식

CSS는 실제 어떻게 작동하는가?

한 browser가 document를 보여줄 때, document의 content와 style 정보를 꼭 함께 보여줘야 한다. Browser는 아래 list 된 몇 가지 단계를 거쳐 document를 보여주게 된다. 아래의 표는 browser가 하나의 webpage를 load할 때 무슨 일이 벌어지는지 아주 간단한 형태로 보여주는 것임을 명심해야 한다. 그리고 각각의 browsers 마다 처리 방법이 다르므로 참고하도록 한다.

Browser가 HTML을 load(불러옴) 한다(e.g. network를 통해 받아옴).
HTML을 DOM으로 변환한다. DOM은 컴퓨터의 메모리에서 document를 대표한다. DOM에 관해서는 다음 section에서 더 자세하게 다룰 것이다.
Browser는 HTML document에 의해 link 된 대부분의 resources들을 불러온다(끼워 넣은 이미지, 비디오 그리고 link 된 CSS 등). JavaScript는 이 과정에서 다소 나중에 다루어진다. 여기에서는 간단하게 다룰 것이기에 이 부분은 더이상 설명하지 않는다.
Browser는 불러온 CSS를 분석하고, selector types에 따라 서로 다른 rules를 분류해 “buckets”에 담는다, 예를 들어 element, class, ID 등. Browser는 selectors에 기반해 찾고, DOM의 어떤 nodes에 어떤 rules가 적용되어야 하는지 계산한다. 그리고 해당 nodes에 style을 붙인다(이 중간 과정을 render tree라고 함).
Render tree는 구조상에 놓여지고 CSS rules가 적용된 후에 나타난다.
Page의 시각적 전시가 화면상에 보이게 된다(이 단계를 painting이라고 함).

다음의 diagram은 해당 과정을 간단하게 보여준다.

rendering

DOM에 관해서

DOM은 tree 비슷한 구조를 가지고 있다. Markup 언어 각각의 element, 속성 그리고 text 부분은 tree 구조 안에서 DOM node가 된다. Nodes는 다른 DOM nodes와의 관계에 의해 정의된다. 어떤 elements는 child nodes의 parents가 될 수 있고, 어떤 것은 child nodes의 자매 격이 될 수 있다.

DOM을 이해하는 것은 design, debug 그리고 CSS를 유지하는데 도움을 준다. 그 이유는 DOM은 당신이 작성한 CSS와 document의 content가 만나는 지점이기 때문이다. Browser DevTools로 작업하기 시작할 때, 어떤 rules가 적용되었는지 알기 위해 DOM으로 가 items를 선택할 것이다.

실제 DOM 표현

길고 지루한 설명보다는 HTML snippet이 DOM으로 변환되는 방식을 보도록 하자.

다음의 HTML code가 있다고 하자:

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

DOM에서 <p> element에 해당하는 node는 parent다. 그리고 parent의 children은 text node 그리고 3개의 <span> elements에 해당하는 nodes다. SPAN nodes는 또한 text nodes를 children으로 갖는 parents nodes가 된다.

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

Browser는 이전의 HTML snippet을 이런 식으로 해석한다 - Browser는 위의 DOM tree를 rendering 해 결과물을 내놓는다.

CSS를 DOM에 적용하기

우리가 document에 style을 더하기 위해 CSS를 추가했다고 하자. HTML은 다음과 같을 것이다:

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

그리고 여기에 다음의 CSS를 추가했다고 하자:

span {
  border: 1px solid black;
  background-color: lime;
}

Browser는 HTML을 분석해 DOM을 생성할 것이고, 그리고나서 CSS를 분석할 것이다. CSS에서 사용 가능한 rule은 span selector이기 때문에, browser는 CSS를 매우 빠르게 분류해낼 수 있을 것이다. 분류한 style을 세 개의 <span> 각각에 적용하고 마지막으로 화면 상에 시각적 묘사를 paint 할 것이다.

Debugging CSS 글에서 DevTools를 이용한 CSS debugging 방법을 배울 것이다. 그리고 이후에 browser가 CSS를 해석하는 방법에 대해 더 자세하게 배울 것이다.

Browser가 이해할 수 없는 CSS를 마주치게 되면 무슨 일이 일어날까?

일찍이 browsers는 새로운 CSS를 같은 시기에 모두 실행할 수는 없다고 언급한 적이 있다. 게다가 많은 사람들이 사용하는 browser의 최신 버전을 사용하지도 않는다. CSS가 계속 개발되고 있고 어떤 browsers가 이것을 인식할 수 있는지에 앞서 browser가 CSS selector 혹은 declaration을 인식하지 못했을 때 무슨 일이 일어나는지 궁금할 것이다.

답은 “어떤 것도 일어나지 않는다! 그리고 다음으로 넘어간다!”다.

만약 browser가 rules를 분석하다가 이해할 수 없는 property 혹은 value를 마주치게 되면 이를 무시하고 다음 선언으로 넘어가게 된다. 이는 error를 발생시키는 rules가 있거나 property 혹은 value의 철자가 잘못 되었거나 property 혹은 value가 최근에 나와서 browser가 아직 지원하지 않는 경우 발생한다.

비슷하게, 만약 browser가 이해할 수 없는 selector를 마주치게 되면, 그 안에 지정한 모든 rule을 무시하고 다음으로 넘어가게 된다.

아래의 예시에서 color의 영국식 영어 철자를 사용했는데, 이 property는 무효화 되고 인식 되지 않는다. 그러므로 다음의 paragraph는 blue로 색칠되지 않는다. 그 외의 CSS는 정상적으로 적용 되고 오직 무효화 된 line만 무시 된다.

<p> I want this text to be large, bold and blue.</p>

p {
  font-weight: bold;
  colour: blue; /* incorrect spelling of the color property */
  font-size: 200%;
}

이 행위는 매우 유용하다. 이것은 새로운 CSS를 개선의 용도로서 사용할 수 있다는 의미다. 왜냐하면 이해하지 못하는 것은 error를 발생시키지 않고 실행되기 때문이다. 이는 기초적인 fallback(대비책) styling을 가능하게 한다.

이것은 다소 최신의 것이거나 모든 곳에서 지원되지는 않는 value를 사용하고자 할 때 특히 잘 작동한다. 예를 들어, 어떤 오래된 browsers가 calc()를 value로 지원하지 않는다고 하자. 나는 대비책으로 box에 pixels로 된 width를 줄 것이고, 그 다음 calc() value에 100% - 50px를 주어 width를 줄 것이다. 오래된 browsers는 그 다음에 오는 calc()를 이해하지 못하므로 pixel version을 사용할 것이다. 최신 browsers는 pixels로 된 줄을 해석한 뒤에 calc()로 된 줄을 해석해 덮어씌울 것이다(cascade 특성을 활용한 fallback skill).

.box {
  width: 500px;
  width: calc(100% - 50px);
}

저작권

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.