이전   다음   목차   속성   색인  

2 CSS 2.2 소개

목차

2.1 HTML용 간단한 CSS 2.2 튜토리얼

이 섹션은 비규범적입니다.

이 튜토리얼에서는 간단한 스타일 시트를 얼마나 쉽게 디자인할 수 있는지 보여줍니다. 이 튜토리얼을 위해 약간의 HTML(참고: [HTML4])과 일부 기본적인 데스크톱 출판 용어를 알고 있어야 합니다.

작은 HTML 문서로 시작해보겠습니다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach의 홈페이지</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach의 홈페이지</H1>
    <P>Johann Sebastian Bach는 다작한 작곡가였습니다.
  </BODY>
</HTML>

H1 요소의 텍스트 색상을 빨간색으로 지정하려면, 다음과 같이 CSS 규칙을 작성할 수 있습니다:

  h1 { color: red }

CSS 규칙은 두 부분으로 구성됩니다: 선택자('h1')와 선언('color: red')입니다. HTML에서는 요소 이름이 대소문자를 구분하지 않으므로 'h1'이나 'H1' 모두 사용할 수 있습니다. 선언은 두 부분으로 이루어집니다: 속성 이름('color')과 속성 값('red')입니다. 위 예시는 HTML 문서 렌더링에 필요한 속성 중 하나만 지정하지만, 그 자체로 하나의 스타일 시트로 인정됩니다. 다른 스타일 시트와 결합될 때(CSS의 주요 특징 중 하나는 스타일 시트가 결합된다는 점입니다), 해당 규칙은 문서의 최종 표현을 결정합니다.

HTML 4 명세는 HTML 문서에서 스타일 시트 규칙을 지정하는 방법을 정의합니다: HTML 문서 내에 직접 지정하거나, 외부 스타일 시트를 통해 지정할 수 있습니다. 스타일 시트를 문서에 포함하려면 STYLE 요소를 사용하세요:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach의 홈페이지</TITLE>
  <STYLE type="text/css">
    h1 { color: red }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach의 홈페이지</H1>
    <P>Johann Sebastian Bach는 다작한 작곡가였습니다.
  </BODY>
</HTML>

최대한의 유연성을 위해, 외부 스타일 시트를 지정하는 것을 권장합니다. 외부 스타일 시트는 HTML 소스 문서를 수정하지 않고도 변경할 수 있고, 여러 문서에서 공유할 수도 있습니다. 외부 스타일 시트와 연결하려면 LINK 요소를 사용할 수 있습니다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach의 홈페이지</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach의 홈페이지</H1>
    <P>Johann Sebastian Bach는 다작한 작곡가였습니다.
  </BODY>
</HTML>

LINK 요소는 다음을 지정합니다:

스타일 시트와 구조화된 마크업의 긴밀한 관계를 보여주기 위해, 이 튜토리얼에서는 계속해서 STYLE 요소를 사용합니다. 색상을 더 추가해봅시다: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach의 홈페이지</TITLE>
  <STYLE type="text/css">
    body { color: black; background: white }
    h1 { color: red; background: white }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach의 홈페이지</H1>
    <P>Johann Sebastian Bach는 다작한 작곡가였습니다.
  </BODY>
</HTML>

스타일 시트에는 이제 네 개의 규칙이 있습니다: 첫 두 규칙은 BODY 요소의 텍스트 색상과 배경을 지정하며(텍스트 색상과 배경색을 함께 지정하는 것이 좋습니다), 마지막 두 규칙은 H1 요소의 색상과 배경을 지정합니다. P 요소에는 색상이 따로 지정되어 있지 않으므로 상위 요소인 BODY로부터 색상을 상속받게 됩니다. H1 요소도 BODY의 자식 요소이지만 두 번째 규칙이 상속된 값을 덮어씁니다. CSS에서는 이런 식으로 여러 값 사이에 충돌이 자주 발생하며, 이 명세에서는 그런 충돌을 어떻게 해결하는지 설명합니다.

CSS 2.2에는 'color'를 포함하여 90개가 넘는 속성이 있습니다. 몇 가지 다른 속성들을 살펴보겠습니다: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach의 홈페이지</TITLE>
  <STYLE type="text/css">
    body { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach의 홈페이지</H1>
    <P>Johann Sebastian Bach는 다작한 작곡가였습니다.
  </BODY>
</HTML>

가장 먼저 주목할 점은 여러 선언들이 중괄호({ ... })로 둘러싸인 블록 안에 그룹화되어 있으며, 각 선언은 세미콜론으로 구분된다는 점입니다. 마지막 선언 뒤에도 세미콜론을 붙일 수 있습니다.

BODY 요소의 첫 번째 선언은 폰트 패밀리를 "Gill Sans"로 지정합니다. 만약 해당 폰트가 없다면, 사용자 에이전트(종종 "브라우저"라고 불림)는 'sans-serif' 폰트 패밀리를 사용하며, 이는 모든 사용자 에이전트가 알고 있는 다섯 가지 기본 폰트 패밀리 중 하나입니다. BODY의 자식 요소들은 'font-family' 속성 값을 상속받습니다.

두 번째 선언은 BODY 요소의 폰트 크기를 12포인트로 지정합니다. "포인트" 단위는 인쇄 기반 타이포그래피에서 폰트 크기나 기타 길이 값을 나타내는 데 자주 쓰입니다. 이는 환경에 상대적으로 변하지 않는 절대 단위의 예입니다.

세 번째 선언은 주변 환경에 따라 크기가 달라지는 상대 단위를 사용합니다. "em" 단위는 해당 요소의 폰트 크기를 기준으로 합니다. 이 경우 BODY 요소 주변의 마진이 폰트 크기의 3배가 됩니다.

2.2 XML용 간단한 CSS 2.2 튜토리얼

이 섹션은 비규범적입니다.

CSS는 구조화된 문서 형식, 예를 들어 eXtensible Markup Language [XML11]로 만든 응용 프로그램에서도 사용할 수 있습니다. 실제로 XML은 HTML보다 스타일 시트에 더 많이 의존합니다. 왜냐하면 작성자가 사용자 에이전트가 표시 방법을 알지 못하는 고유 요소를 만들 수 있기 때문입니다.

아래는 간단한 XML 조각입니다: 

<ARTICLE>
  <HEADLINE>프리드리히 대왕이 Bach를 만나다</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    어느 날 저녁, 그가 <INSTRUMENT>플루트</INSTRUMENT>를 준비하고
    음악가들이 모였을 때, 한 장교가 도착한 낯선 이들의 명단을 가져왔습니다.
  </PARA>
</ARTICLE>

이 조각을 문서 형태로 보여주려면, 먼저 어떤 요소가 인라인 레벨(즉, 줄바꿈 없이 표시)이고 어떤 요소가 블록 레벨(즉, 줄바꿈을 유발하는지)인지 선언해야 합니다. 

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

첫 번째 규칙은 INSTRUMENT를 인라인으로 선언하고, 두 번째 규칙(콤마로 구분된 선택자 목록)은 나머지 모든 요소를 블록 레벨로 선언합니다. XML에서는 요소 이름이 대소문자를 구분하므로, 소문자로 작성된 선택자('instrument')와 대문자로 작성된 선택자('INSTRUMENT')는 서로 다릅니다.

XML 문서에 스타일 시트를 연결하는 한 가지 방법은 처리 명령을 사용하는 것입니다: 

<?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>프리드리히 대왕이 Bach를 만나다</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    어느 날 저녁, 그가 <INSTRUMENT>플루트</INSTRUMENT>를 준비하고
    음악가들이 모였을 때, 한 장교가 도착한 낯선 이들의 명단을 가져왔습니다.
  </PARA>
</ARTICLE>

시각적 사용자 에이전트는 위 예시를 다음과 같이 렌더링할 수 있습니다:

예시 렌더링   [D]

플루트라는 단어가 단락 내에 그대로 남아 있는 것을 볼 수 있는데, 이는 인라인 요소 INSTRUMENT의 내용이기 때문입니다.

하지만 아직 기대하는 방식대로 텍스트가 포맷되지 않았습니다. 예를 들어, 헤드라인의 폰트 크기가 본문보다 더 커야 하고, 저자의 이름을 이탤릭으로 표시할 수도 있습니다: 

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

시각적 사용자 에이전트는 위 예시를 다음과 같이 렌더링할 수 있습니다:

예시 렌더링   [D]

스타일 시트에 더 많은 규칙을 추가하면 문서의 표현을 더 상세히 지정할 수 있습니다.

2.3 CSS 2.2 처리 모델

이 섹션은 하위 섹션을 제외하고 비규범적입니다.

이 섹션에서는 CSS를 지원하는 사용자 에이전트가 어떻게 동작하는지에 대한 하나의 개념 모델을 소개합니다. 이는 개념적 모델일 뿐이며, 실제 구현은 다를 수 있습니다.

이 모델에서는 사용자 에이전트가 소스를 다음 순서로 처리합니다:

  1. 소스 문서를 파싱하고 문서 트리를 생성합니다.
  2. 대상 미디어 유형을 식별합니다.
  3. 대상 미디어 유형에 지정된 모든 스타일 시트를 문서와 연결된 스타일 시트들 중에서 가져옵니다.
  4. 문서 트리의 모든 요소에 대해 대상 미디어 유형에 적용되는 모든 속성에 대해 단일 값을 할당하여 주석을 추가합니다. 속성 값은 캐스케이딩 및 상속 섹션에서 설명한 메커니즘에 따라 할당됩니다.

    값 계산의 일부는 대상 미디어 유형에 적합한 포맷팅 알고리즘에 따라 달라집니다. 예를 들어, 대상 미디어가 화면이라면 사용자 에이전트는 시각적 형식 모델을 적용합니다.

  5. 주석이 추가된 문서 트리로부터 포맷팅 구조를 생성합니다. 포맷팅 구조는 종종 문서 트리와 유사하지만, 의사 요소와 생성된 콘텐츠를 사용할 경우 크게 다를 수도 있습니다. 첫째, 포맷팅 구조는 반드시 "트리 형태"일 필요는 없습니다. 구조의 형태는 구현에 따라 달라집니다. 둘째, 포맷팅 구조에는 문서 트리보다 정보가 많거나 적을 수 있습니다. 예를 들어, 문서 트리의 어떤 요소가 'display' 속성 값으로 'none'을 가지면, 해당 요소는 포맷팅 구조에 아무것도 생성하지 않습니다. 반면, 리스트 요소는 포맷팅 구조에 더 많은 정보를 생성할 수 있습니다: 리스트 요소의 콘텐츠와 리스트 스타일 정보(예: 불릿 이미지 등).

    이 단계에서 CSS 사용자 에이전트는 문서 트리를 변경하지 않습니다. 특히, 스타일 시트로 인해 생성된 콘텐츠는 문서 언어 처리기로 다시 전달되어 재파싱되지 않습니다.

  6. 포맷팅 구조를 대상 미디어로 전달합니다(예: 인쇄, 화면에 표시, 음성 렌더링 등).

2.3.1 캔버스

모든 미디어에서 캔버스란 "포맷팅 구조가 렌더링되는 공간"을 의미합니다. 캔버스는 각 공간의 차원에서 무한하지만, 렌더링은 일반적으로 사용자 에이전트가 대상 미디어에 따라 정한 유한 영역 내에서 이루어집니다. 예를 들어, 화면에 렌더링하는 사용자 에이전트는 최소 너비를 두고 뷰포트의 크기에 따라 초기 너비를 정합니다. 페이지에 렌더링하는 경우 너비와 높이 제한이 적용됩니다. 청각 사용자 에이전트는 오디오 공간에는 제한을 둘 수 있으나 시간에는 제한을 두지 않습니다.

2.3.2 CSS 2.2 주소 지정 모델

CSS 2.2 선택자와 속성을 사용하면 스타일 시트에서 문서 또는 사용자 에이전트의 다음 부분을 참조할 수 있습니다:

2.4 CSS 설계 원칙

이 섹션은 비규범적입니다.

CSS 2.2는 이전 CSS2, CSS1과 마찬가지로 다음과 같은 설계 원칙을 기반으로 합니다:

이전   다음   목차   속성   색인