How CSS works


이 페이지는 브라우저에서 CSS가 어떻게 작동하는 지를 설명합니다. 샘플 문서를 분석해서 스타일의 세부사항들을 보여줍니다.

정보: CSS가 작동하는 방식

문서를 디스플레이 할때, 모질라는 문서의 내용물과 문서의 스타일 정보를 합쳐야만 합니다. 그래서 모질라는 문서를 두 단계로 처리합니다:

  • 첫 단계에서 모질라는 마크업 언어와 CSS를 DOM(문서 객체 모델, Document Object Model)로 변환합니다. DOM은 컴퓨터 메모리상의 문서를 말하며, 문서의 내용물과 스타일이 결합시킵니다.
  • 두 번째 단계에서, 모질라는 DOM을 디스플레이 합니다.

마크업 언어는 문서의 구조를 정의하기 위해서 택을 사용합니다. 택은 그 시작과 끝 사이에 다른 택들을 포함하는 콘테이너가 될 수 있습니다.

DOM은 트리같은 구조를 갖습니다. 마크업 언어의 각각의 택과 텍스트는 트리 구조의 노드(node)가 됩니다. DOM 노드들은 콘테이너가 아닙니다. 반면에 이들은 자녀 노드들의 부모가 될 수 있습니다.

택들에 상응하는 노드들은 엘리먼트(element)라고도 알려져 있습니다.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
샘플 문서에서 <p>택과 그 끝 택인 </p>는 콘테이너를 만듭니다:
<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

DOM에서 이에 상응하는 P노드는 부모입니다. 이 노드의 자녀는 STRONG노드들과 텍스트 노드들 입니다. STRONG노드들은 그 자신들이 텍스트 노드들을 자녀로 가지고 있는 부모노드들입니다:

P ├─STRONG │ │ │ └─"C" │ ├─"ascading" │ ├─STRONG │ │ │ └─"S" │ ├─"tyle" │ ├─STRONG │ │ │ └─"S" │ └─"heets"

DOM에 대한 이해는 CSS의 디자인, 디버깅, 그리고 유지에 상당한 도움이 됩니다. 왜냐하면 바로 DOM에서 CSS와 문서의 내용물이 서로 만나게 되기 때문입니다.

액션: DOM 분석하기

DOM을 분석하기 위해선 특별한 소프트웨어가 필요합니다. 여기에선 DOM을 분석하기위해 모질라의 DOM Inspector(DOMi) 을 사용합니다.

모질라 브라우저를 사용해서 샘플 문서를 여세요.

브라우저 메뉴바에서 Tools – DOM Inspector, 나 Tools – Web Development – DOM Inspector 를 선택하세요.

<caption style="font-weight:bold; text-align:left;">More details </caption>
모질라 브라우저에 DOMi가 없다면, 웹브라우저를 재 인스톨하면서 웹 도구 컴포넌트(web tools component) 인스톨하는 것을 잊지말고 선택해 주세요. 그다음 다시 튜토리얼로 돌아오세요.

DOMi를 인스톨하는 것을 원치 않으신다면, 이 섹션을 건너 뛰시고 바로 다음 페이지로 가셔도 됩니다. 이 페이지를 건너뛰셔도 나머지 튜토리얼에는 지장이 없습니다.

DOMi에서 문서 노드들에 있는 화살표를 클릭해서 노드를 펼쳐보세요.

주의:  HTML파일에 있는 스페이싱 때문에 DOMi가 비어있는 텍스트 노드를 보여줄 수 있습니다. 그냥 무시하셔도 됩니다.

결과중 일부는 어떤 노드들을 펼쳤느냐에 따라서 다음과 같이 보일 수 있습니다:

P │ │ │ STRONG │ │ └#text │ ├╴#textSTRONG │ │

어떤 노드를 선택하시던지, DOMi의 오른편 창을 사용해서 그 노드에 관해 더 많은 것을 찾아 보실 수 있습니다. 예를 들면, 텍스트 노드를 선택하게 되면, DOMi는 그 텍스트를 오른쪽 창에 보여줍니다.

엘리먼트 노드를 선택하시면, DOMi는 노드를 분석한 뒤 오른쪽 창에 엄청난 양의 정보를 보여줍니다. 스타일 정보는 단지 DOMi가 제공하는 정보의 부분일 뿐입니다.

<caption style="font-weight:bold; text-align:left;">Challenge </caption>
DOMi에서, STRONG 노드를 클릭하세요.

DOMi의 오른쪽 창을 사용해서 노드의 색이 빨간색으로 된 곳과 노드의 모양이 보통 텍스트보다 더 굵게 된 곳을 찾아보세요.


그럼 다음은?

challenge를 해보신 분은 한 군데 이상에서의 스타일 정보가 상호 작용을 통해 엘리먼트의 최종 스타일을 생성한다는 것을 보실 수 있었을 것입니다.

다음 페이지에서는 이러한 상호작용들에 대해서 좀더 설명합니다: Cascading and inheritance

Document Tags and Contributors

Contributors to this page: Ioseph
Last updated by: Ioseph,