Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
검색 결과

    CSS 동작 원리

    중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/13)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

    이번에는 CSS 시작하기 안내서의 세번쨰 장으로 CSS가 브라우저에서 어떻게 동작하는지를 살펴 보자. 예제 Document를 분석하고 그 Style의 자세한 사항을 알아보자.

    정보: CSS 동작 원리

    브라우저가 Document를 표시할때, Style정보와 결합하여 Document의 내용을 표시해야 한다. 여기에는 두단계를 거치게 된다.

    1. 브라우저는 마크업 언어와 CSS를 DOM(Document Object Model)이라 불리는 구조체로 변환 한다. DOM이란 컴퓨터 메모리에서의 document를 말한다. DOM에서는 Document의 내용과 Style을 결합한다.
    2. 브라우저는 DOM의 내용을 보여준다.

    마크업 언어는 Document의 구조체를 정의 하기 위해 "element" 이용한다. "Element"는 '<'로 시작하고 '>'로 끝나는 문자열을 일컽는 "tags"를 이용하여 마킹 한다. 'element"는 '< element 이름>'로 구성된 시작 태그와 '</element 이름>'으로 구성된('</'로 시작하는) 종료 태그를 가질 수 있다. 마크업 언어에 따라, 어떤 element는 시작 태그 또는 element 이름 다음에 '/'가 오는 태그로만 구성 되기도 한다.

    element는 시작 태그와 종료 태그 사이에 다른 element를 포함 할 수도 있다.

    DOM은 나무와 같은 구조를 가지고 있다. 각 element와 마크업 언어의 텍스트들은 나무 구조에서의 노드가 된다. DOM는 컨테이너가 아니고 자식 노드의 부모가 된다.

    예제
    예제 Document에서, <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와 Documents의 내용과 일치하기 때문에 CSS를 설계하고 디버깅하고 유지 보수 하는데 도움이 된다.

    액션: DOM 분석

    DOM 인스팩터 사용하기

    DOM을 분석하기 위해서는, 특별한 프로그램이 필요하다. 여기에는 모질라에서 제공하는 DOM Inspector (DOMi) 애드온 프로그램이 있다. 사용 하려면 애드온을 설치 하라.

    1. 모질라 브라우저로 예제 HTML document를 열어라.
    2. 브라우저 메뉴바에서 Tools > DOM Inspector, 또는 Tools > Web Development > DOM Inspector를 선택하라
      좀더 자세히

      모질라 브라우저에서 DOMi가 없다면, 애드온 사이트를 통해 설치하고 브라우저를 재시작 하라.

      DOMi를 설치하기 싫다면 (모질라 브라우저 외의 다른 브라우저를 사용한다면), 구글에서 제공하는 Web X-Ray를 통해 다음 섹션에 설명된 내용으로 사용 할 수 있다. 또는 이선 섹션을 건너뛰고 다음 페이지로 갈수도 있다. 이번 섹션을 건너뛰더라도 나머지 안내서를 이해 하는데 어렵지 않을 것이다.

    3. DOMi에서, 검은 화살표를 선택하여 document의 노드를 확장 해 보라.

      참고: HTML파일에 빈칸을 넣는다면 DOMi에서는 빈 텍스트 노드를 보여줄지도 모른다.

      어떤 노드를 확장 했는지는 모르 겠지만 일부의 결과는 아래와 같이 나올지 모른다.

      │ ▼╴P
      │ │ │ ▼╴STRONG
      │ │ └#text
      │ ├╴#text
      │ ►╴STRONG
      │ │

      아무 노드를 선택하면 DOMi의 오른쪽편에 해당 노드의 정보를 볼수 있다. 예를 들면, 텍스트 노드를 선택해 보면 DOMi의 오른쪽 창에 해당 텍스트를 볼 수 있다.

      element노드를 선택하면, DOMi는 그 element를 분석하고 다양한 정보를 보여준다. Style정보는 위에서 제공하는 정보의 일부분이다.

    도전

    DOMi에서, STRONG노드를 선택 해보라.

    DOMi의 오른쪽 정보창에서 어느 노드의 색상이 red인지 찾아보고, 어느 노드의 텍스트가 bold로 되어 있는지도 찾아 보라.

    Possible solution

    In the menu above the right-hand pane, choose CSS Rules.  You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

    Hide solution
    정답 확인.

    구글의 Web X-Ray 사용하기

    구글의 Web X-Ray는 DOM Inspector보다 설치도 쉽고 간단하지만 보여지는 정보도 적다.

    1.  Web X-Ray Goggles 홈페이지로 이동
    2. Drag the bookmarklet link in that page to your browser toolbar.
    3. Open your sample HTML document.
    4. Activate Web X-Ray Goggles by clicking the bookmarklet on the toolbar.
    5. Move your mouse pointer around over your document to see the elements in the document.

    다음에는?

    '도전'을 해봤다면 element의 최종 Style을 생성하기 위해 하나 이상의 style정보와 상호 작용하는 것을 보았을 것이다. 다음 장에서는 이와 같은 상호작용에 대해 설명한다.

    문서 태그 및 공헌자

    Contributors to this page: SpikeYou, teoli
    최종 변경: teoli,