4. CSS, Level2 Rev1 설명서 - part 2
W3C 작업초안 2006년 4월 11일

원문: http://www.w3.org
번역: pinkhare(분홍토끼) in GTport

3) CSS 2.1이 CSS 2에서 달라진 점

CSS의 오류들이 다양한 에러 발표를 거쳐 이후에 수정되었다. CSS2가 1998년 권고안으로 제정되면서 상당한 발전이 있었다. CSS2 설명서의 오류는 다양한 오탈자의 보고를 통해 순차적으로 수정되었으나, 아직도 수정해야 할 점이 남아있다.

이러한 많은 논점들이 곧 공개될 CSS3 설명서에서 제기되는 동안, 현재의 여건들로 인해 CSS2의 구현 및 공동 사용이 진행되지 못하고 있다. CSS 2.1 설명서는 아래 내용을 통하여 이러한 상황을 설명하고 있다:
 
    ● 폭넓게 수용되고 구현되는 CSS2의 특성들에 대한 호환성 유지
    ● 발표된 모든 CSS2의 오류(오탈자) 추가
    ● 구현이 CSS2 설명서와 압도적으로 차이날 경우 일반적으로 수용되는 관례에 따르기 위해 설명서 수정
    ● 잠재 기능이 구현되지 않고 있어서, CSS 커뮤니티가 반대한 CSS2 도구들 제거. CSS 2.1는 일반적으로
        HTML 및 XML 언어에 대해 (특정 XML 언어나 HTML에 대해서만이 아니라) 광범위하게 합리적으로
        구현되는 것이 어떠한 CSS 도구들인지를 반영하려는 목적으로 탄생했다.
    ● CSS3에서 폐지될 CSS2 도구들을 제거함으로써, 제안된 CSS3 도구들의 채택을 촉진
    ● 구현 경험이 CSS2를 구현하는 데 필요하다고 밝혀질 경우, (상당히) 적은 수의 새로운 프로퍼티 값들을 추가

CSS 2.1은 CSS2에서 나왔고, CSS2를 대체하기 위한 것이다. CSS2의 어느 부분은 CSS 2.1에서도 그대로이지만, 일부는 대체되었으며, 일부는 제거되었다. 제거된 부분은 차후 CSS3 설명서에 사용될 수도 있다. 향후 명세는 CSS 2.1을 참조할 것이다 (그것들이 CSS 2.1에서 사라진 CSS2의 도구들을 필요로하지 않고 그러한 기능들에 있어서 CSS2만을 참조해야 하는 것이 아니거나, 혹은 오히려 그 도구들을 포함하는 각 CSS 모듈에서 그 도구들을 참조하지 않는다면).

3. Cascading Style Sheets, Level2 Rev1 설명서 - part 1
W3C 작업초안 2006년 4월 11일

날짜를 보아하니 CSS2 설명서를 공식적으로 발표한지도 꽤 오래되었네요.
그러고보면 조만간 CSS 3가 나오게 될 이 시점에서 어째서 CSS 2에 관심을 두느냐 ..
네. 하지만 아직 CSS 3의 정확한 세부사항이 명쾌히 발표된 것이 아니고, 또한 CSS 3가 완성된다 하더라도
CSS 2를 자세하게 공부해 둠으로써 아무런 어려움 없이 CSS 3에 직면했을 때 대처할 수 있습니다.
CSS 활용의 장점에 대해서는 앞서 충분히 말씀을 드렸으니, 분홍토끼의 이번 연재부터는 실질적으로
CSS 2의 상세 및 소개의 간략한 요약, 그리고 실질적인 내용 진도를 싣기 시작하겠습니다.

사실 CSS 뭐 그리 거창하거나 방대하지도 않아보인다.. 굳이 체계적인 공부가 필요하냐... 라고 의문을 가지실 수 있겠습니다만, 실제로 분량이 결코 적지도 않을 뿐더러 이것의 자유로운 실질적 활용을 위해서는 완벽한 이해를 한 상태에서도 쉬운 일은 아닙니다. 그나마 제대로 이해를 해 둔다면 언제든 웹프로그래밍 도중에 CSS 때문에 곤란을 겪는 일은 사전에 막을 수 있겠죠.
긴 서론은 이쯤 해두고 바로 시작하지요.

* 흠. 우연히 찾았는데 -.- 한글 w3c 사이트에 이미 한글화된 설명서가 있었네요. 헉스~. 그것도 모르고 열심히 번역했다는.. 그치만 너무 틀린 해석도 많고, 이해하는데 어렵게 옮겨진 분분이 많아서..... 차라리 원문 보고 하는게 낫겠다는 생각에서 그냥 현 상태를 유지하며 분홍토끼가 직접 번역하고 공부한 내용을 정리해 올리려합니다.
이번 글과 같이 필요에 따라 분홍토끼의 번역 그대로를 올리는 때도 있겠고요.


원문: http://www.w3.org
번역: pinkhare(분홍토끼) in GTport

# 규범적인 내용을 표시하기 위한 것이 아닌, 정보를 제공하는 목적입니다. (규칙성이 아닌 정보성)

1) HTML 4.0에 대한 스타일 시트 예제 (xhtml에서는 사용 불가능한 것들도 다수 포함)

일부 HTML 엘리먼트들은 CSS 2에서 모두 표현되지 않는 것들도 있습니다.
예) 대체 엘리먼트 (img, object), 스크립팅 엘리먼트 (script, applet), 폼 제어 엘리먼트, 프레임 엘리먼트

ADDRESS,
BLOCKQUOTE,
BODY, DD, DIV,
DL, DT,
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4,
H5, H6, IFRAME,
NOFRAMES,
OBJECT, OL, P,
UL, APPLET,
CENTER, DIR,
HR, MENU, PRE   { display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* An example of style for HTML 4.0's ABBR/ACRONYM elements */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Elements that are block-level in HTML4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
COL, COLGROUP, TD, TH, CAPTION
                { unicode-bidi: embed }
/* End bidi settings */


@media print {
  @page         { margin: 10% }
  H1, H2, H3,
  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE,
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
}

@media speech {
  H1, H2, H3,
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}


2) CSS1 에서 변화된 사항들

CSS2는 CSS1을 기반으로 제작되었고, CSS1에서 사용할 수 있는 스타일시트는 모두 CSS2에서도 사용할 수 있습니다. CSS2와 CSS1의 차이점은 세가지로 분류할 수 있습니다.

ㄱ. 새로운 기능

- media types (매체 형태) 개념
- 모든 프로퍼티에 대한 inherit (상속) 값
- paged media
- 청각 스타일 시트
- 국제화 도구들 (목록 번호매김 스타일, 양방향 텍스트, 언어 인식 따옴표(인용 표시))
- 확장 글꼴 선택 메카니즘 (지능형 맟춤, 합성, 다운로드 가능 폰트 포함), 시스템 폰트, 새로운 프로퍼티 'font-size-adjust' 추가
- 테이블류, 새로운 값 'display', 'vertical-align'
- 상대위치, 절대위치 (고정 위치 포함)
- 새로운 박스 타입 (block과 inline이 있는): compact, run-in
- 비주얼 포맷팅 모델에서 내용 overflow, clipping, visibility 제어 가능
- 비주얼 포맷팅 모델에서 최대 및 최소 width, height 지정 가능
- 확장 선택자 메카니즘 (자식 선택자, 인접 선택자, 애트리뷰트 선택자 포함)
- 생성 내용, 카운터, 자동 번호 매김, 마커
- 새로운 프로퍼티 'text-shadow'를 이용한 텍스트 쉐도우
- 몇 개의 새로운 가상 클래스, :first-child, :hover, :focus, :lang
- 시스템 색상 및 폰트
- 커서들 (cursor)
- 동적 윤곽선들 (outline - border와 다름)

ㄴ. 갱신된 설명들

CSS1 설명서는 짧고 간결했습니다. 그에 비해 CSS2 설명서는 훨씬 방대하며 가독성이 높습니다. 많은 부가 문맥을 통해 새로운 기능을 설명하며, CSS1 도구들에 대한 설명 역시 확대되었습니다. 아래(ㄷ) 설명된 몇몇 경우를 제외하고는, 다시 작성된 설명이 문맥이나 의미적인 변화를 의미하지는 않습니다.

ㄷ. CSS1에서의 의미 변화

CSS1 스타일 시트가 CSS2 스타일 시트에서도 사용할 수 있기는 하지만, 때때로 적은 경우에 있어서 CSS2 스타일 시트에서는 해석되는 의미가 다른 경우가 있습니다. 대부분의 변화는 설명서로 피드백 되는 구현 경험에 의한 것이지만, 일부는 오류의 수정도 있습니다.


part 2 에서 이어집니다.

CSS의 개념 및 기초 정리 - part 1
작성: pinkhare(분홍토끼) in GTport

자, 제가 연재하려는 주제가 다소 다양하지요?
그렇다고 제가 이 모든 것에 정통했다든지 특정 지식을 가진 사람이 아님을 미리 밝혀둡니다.
저도 필요로 하고 관심도 있으며, 배워둬서 나쁠 게 전혀 없는 일이기에 현 시점과 같은 과도기적 시기에
하나라도 더 알아두면 좋은 것이죠.

* 첫 연재이다보니 조금 연재되는 주제의 순서가 뒤바뀔 수도 있고 보충/수정되는 내용도 있을 수 있습니다. ^^
* 저의 작성 특징 중 하나는 보다 빠른 이해를 위해 하나의 합성어화된 몇몇 단어들을 붙여씁니다.
  맞춤법에 관계 없이 떨어뜨려서 이해를 위한 두뇌회전의 횟수를 늘리지 않기 위한 분홍토끼의 정책입니다.
  (예:  웹 페이지 --> 웹페이지 / 라운딩 박스 --> 라운딩박스, 만든다는 게 --> 만든다는게 ...)
* 지티포트 CSS 게시판에 연재되는 모든 글에 사용되는 'HTML'은 (X)HTML의 의미입니다. (HTML, XHTML 포함 개념)

CSS의 정의는 앞에서 설명드렸고, 그렇다고 CSS 라는 하나의 독립된 존재만으로 뭔가를 할 수 있는건 아닙니다.
다수의 웹디자이너 혹은 적은 비중의 웹프로그래머에 의해 사실 CSS는 이미 흔히 쓰여왔고 특이하거나
새로운 기술인 것도 아닙니다.

HTML 만으로는 웹페이지를 만든다는게 불가능한 것일까요? 그래서 다들 CSS를 사용하고자 하는 걸까요?
노우~ 절대로 그렇지 않겠지요.
솔직히 HTML의 기본 태그만으로도 얼마든지 페이지를 만들 수 있고, 심지어 사이트 전체도 그렇게 만들 수 있습니다. 다만 다소의 기능, 표현 가능성, 편의성, 일관성, 연계성, 체계성 등에 있어서 분명한 차이가 있겠죠.

HTML의 경우, 애트리뷰트나 프로퍼티 등의 속성들에는 한계가 있습니다. CSS는 이러한 한계에 보다 자유롭습니다.
CSS의 구조적인 코딩 방법을 배우게 되면, 이제껏 생각지 못했던 기능들의 활용이 가능하여 실제로 이미지나 플래쉬 없이도 정말 근사하고 깔끔한 사이트를 제작할 수가 있습니다.
HTML 문서 내에서 스타일(style)을 지정하는 방식과는 달리, 일련의 요소들에 관한 정의를 체계적으로 모아둔 독립된 파일을 이용함으로써 추후의 유지 및 수정도 용이하고 제작자가 의도한 각종 요소들을 일괄적으로 모든 해당 페이지들에 동시 적용할 수 있습니다.
CSS의 장점, 단점에 대해서는 이후에 제대로 다루도록 하겠습니다.

앞서도 말씀드렸듯이, CSS가 아무리 멋진 양식이라 하더라도 그러한 양식(스타일)이 적용되기 위해선 그것이 적용될 원래의 뼈대가 있어야 하는 것입니다. 그것은 (X)HTML이 되겠지요.
따라서 CSS를 공부하고자 하는 여러분은 이전에 혹은 동시에 (X)HTML에 대해서 대충대충이 아니라 비교적 정확한 개념과 각종 태그들의 기능들에 대해 알고계셔야 합니다.

Cascading Style Sheet - 구체적 정의
작성: pinkhare(분홍토끼) in GTport

기존의 HTML 만으로는 웹 문서를 다양하게 설계하는 데 약간의 제한이 따르고, 수시로 수정할 경우 불필요한 시간과 노력이 들어갑니다. 이것을 보완하기 위해 스타일 시트라는 것이 고안되었습니다. 스타일 시트의 표준안이 바로 우리가 공부하려는 CSS 입니다. 그냥 간단하게 스타일시트라고 부르기도 합니다.

HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 사용되는 곳마다 매번 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경하더라도 관련된 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간 단축 및 편의성을 얻을 수 있습니다.
따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있습니다.
각기 다른 사용자 환경에서 동일한 형태로 문서를 표현해준다는 이점도 가지고 있습니다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달됩니다.

1. Cascading: cascade는 "폭포가 되어 떨어지다"라는 뜻입니다. 폭포는 물이 위에서 아래로 힘차게 흘러 내립니다. style sheet에, cascading이란 말이 붙은 이유를 보면 CSS에는 '우선순위'라는 것이 있습니다.
이 CSS의 우선순위가 정해지는 것이, 꼭 cascade와 비슷한 느낌을 주기 때문에, style sheet에 cascading이란 말을 붙인 것입니다.

2. Style: style은 예를 들어서 어떤 문서가 있는데 글자 크기가 10, 글자색은 노란색, 글꼴은 고딕입니다. 다른 문서는 글자 크기가 12, 글자색은 파란색, 글꼴은 명조입니다. 이 두 개의 문서가 내용이 같을 수는 있지만, 겉모양은 다릅니다. 이것을 보고, 두 문서는 스타일이 다르다고 합니다.

3. Sheet: sheet는 단어 뜻으로 보면 style을 적어 놓은 종이라는 의미입니다. 즉, '겉모양은 이러 이러하게 하라'는 내용이 들어 있는 곳입니다.- 여러 문서가 내용은 다르지만, 겉 모습은 똑같은 경우를 생각해 보면 문서 하나 하나의 내용과 겉 모습을 작성하게 되면, 중복되는 작업이 있습니다. 그러므로 style을 한 번만 정해 놓고, 내용만 있는 문서에 이를 적용하면, 아주 편리해 질 것이다. 바로 이러한 역할을 하는 것이 Style Sheet입니다.