[CSS] CSS 3강 - CSS의 작동방식

이번 시간에서는 브라우저가 CSS와 HTML을 

가져와서 웹 페이지를 만드는 방법을 

살펴 보도록 하겠습니다.

 

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

 

브라우저가 웹 페이지에 문서를 표시할 때 

문서의 콘텐츠와 해당 스타일 정보를

서로 결합해야 합니다.

 

아래 나열된 여러단계로 문서를 처리합니다

이것은 브라우저가 웹 페이지를 로드할 때

 

발생하는 작업의 매운 단순화된 버전으로 

다른 브라우저가 다른 방식으로 작업을 

처리하는다는 점을 명심하시면 됩니다.

 

1. 브라우저는 HTML(ex.네트워크에서 HTML 수신)을 로드
2. HTML을 DOM(Document Object Model)로 변환함
   DOM은 컴퓨터 메모리의 문서를 나타내는 요소
3. 그 다음 브라우저는 포함된 이미지 및 비디오와 같은 
   HTML 문서에 연결된 대부분의 리소스와 연결된 CSS를
   가져옴, Javascript는 작업에서 나중에 처리됨 
4. 브라우저는 가져온 CSS를 구문 분선 후 선택자 유형별로 
   다음 규칙을 따른 "buckets"으로 정렬함  
5. 정렬 시에는 요소,클래스,ID 등 찾은 선택자를 기반으로
   DOM의 어느 노드 어떤 규칙을 적용할지 결정하고 필요에
   따라서 스타일을 첨부함

---

DOM 정보

 

 

DOM은 트리와 같은 구조를 가지고 있습니다.

마크 업 언어의 각 요소, 속성 및 텍스트는

트리구조 DOM node가 됩니다.

 

노드는 다른 DOM 노드와 관계에 의해 

정의 되고, 일부 요소는 자식 노드의 부모이고

자식 노드에는 형제가 있습니다. 

 

DOM은 CSS와 문서의 내용이 만나는 곳이라

DOM을 이해한다면 CSS를 설계, 디버그 및 

유지 관리에 큰 도움이 될 것 입니다.

 

브라우저 DevTools로 작업 시, 적용할 규칙을

보기 위해 항목을 선택 시 DOM을 탐색합니다.

---

실제 DOM 표현하기

 

실제로 HTML에서 DOM을 표현하기 위해서는

아래에 HTML이 DOM을 변환하는 코드를 작성합니다.

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

DOM 에서, <p> 요소애 해당하는 노드는 부모 요소로

자식은 텍스트 노드며 <span> 요소에 해당하는 세 개의

노드입니다. <span> 요소는 부모로 텍스트 노드는 자식입니다.

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

브라우저가 이전 HTML을 해석하는 방법입니다. 

---

DOM 에 CSS 적용하기

 

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

브라우저는 HTML을 구문 분석하고 그로부터 

DOM을 작성한 다음 CSS를 구문 분석합니다. 

 

CSS에서 사용할 수 있는 유일한 규칙으로 

span 선택자가 있으며, 브라우저는 CSS를 

매우 빠르게 정렬할 수 있습니다. 

 

이 규칙을 세 개의 <span> 각각에 적용한 

다음 최종 시각적 표현을 화면에 표시합니다.

 

브라우저에 인식하지 못하는 CSS는 어떻게 할까?

 

브라우저가 규칙을 구문 분석하고 이해하지

못하는 속성 이나 값을 발견하면 이를 무시하고 

다음 선언으로 넘어가 줍니다. 

 

오류가 발생해 속성 또는 값의 철자가 틀렸거나

속성 또는 값이 너무 새롭고 브라우저가 아직 

이를 지원하지 않을 경우, 이 작업을 수행합니다.

 

마찬가지로, 브라우저가 이해하지 못하는 

선택자를 만난다면 전체 규칙을 무시하고 

다음 규칙으로 넘어갑니다.

 

아래 예는 글자를 파란색으로 영국식 철자를 

사용했는데, 그 속성은 인식되지 않기 떄문에 

이것은 유효하지 않습니다.

 

그래서 단락은 파란색으로 표기되지 않습니다.

유효하지 않은 것을 제외한 부분은 전부 표기되며

유효하지 않은 것만 브라우저에서 제외됩니다.

<p>이 텍스트를 크고 굵은 파란색으로 표기</p>

p {
  font-weight: bold;
  colour: blue; /* color  속성의 잘못된 철자 */
  font-size: 200%;
}

이 동작은 매우 유용하며, 이는 새로운 CSS를 

향상된 기능으로 사용할 수 있음을 의미하며

 

새 기능을 이해하지 못할 경우 오류가 발생하지

않습니다, 브라우저는 새로운 기능을 얻거나 

 

얻지 못하며 cascade 작동 방식 및 브라우저가 

스타일이 동일한 마지막 CSS를 사용한다는

사실과 동일한 특성을 가진 두 규칙이 있을 경우

 

새 CSS를 지원하지 않는 브라우저에 대한

대안을 제공할 수 있습니다. 

 

이것은 새롭고 모든 곳에서 지원되지 않는 값을

사용할 경우 특히 효과적인데 예를 들어서 

구형 브라우저는 calc()를 값으로 지원하지 않습니다.

 

박스에 대해 대체 너비를 픽셀 단위로 지정 후

calc() 값을 100% - 50px로 너비를 지정합니다.

 

오래된 브라우저는 픽셀 버전을 사용하나 

이해하지 못하는 calc()에 대한 라인은 무시합니다.

 

새로운 브라우저는 픽셀을 사용할 경우 

라인을 해석하는 기능을 가지고 있으나 

 

나중에 cascade에서 나타날 떄 calc()를

사용하여 라인을 재정의 합니다.

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

---

참고 자료

CSS 작동 방식 | MDN

 

GitHub - CSS-STR/css-blog-tutorial