Wystan's tales

CSS의 관점에서, HTML 문서는 크고 작은 여러 개의 사각형 박스로 구성됩니다. 그 중에는 요소에 의해서 만들어지는 박스도 있고, 자동적으로 만들어지는 박스(익명(anonymous) 박스)도 있지만, 근본적으로 “박스”라는 것에는 차이가 없습니다.

CSS를 지원하는 사용자 에이전트는 이렇게 만들어진 박스를 배치함으로써 문서의 레이아웃을 표현합니다. 이 과정에서 각각의 박스는 어떤 방식으로 배치될 것인지에 따라 크게 다음과 같이 세 가지로 분류됩니다.

• 일반적인 흐름(normal flow)으로 배치되는 박스
• 떠있는(float) 상태로 배치되는 박스
• 절대적인 위치(absolute position)로 배치되는 박스

이 세 가지 배치 방식은 CSS의 근간인 시각적인 서식 모델의 핵심입니다. 이 글에서는 먼저 각각의 배치 방식을 간단히 알아보고, 배치 방식을 결정짓는 position. float 속성과 박스 유형을 결정짓는 display 속성이 어떻게 상호 작용하는지를 정리해보겠습니다.

† display 속성 값에 따라 만들어지는 block, inline, run-in 박스 등에 대해서는 이 글에서 다루지 않습니다.

예전에 float을 제거하는 방법이라는 글에서 overflow 속성을 이용하는 float 해제 방법을 다뤘습니다. 그 내용을 아래에 일부 인용하겠습니다.

“만약 width만 지정한 상태에서 overflow: hidden;을 적용하면 박스가 내용물의 크기만큼 아래로 늘어나니까요. 이 때 박스 안에 있는 float된 요소의 높이까지도 같이 계산됩니다. 결국 박스가 float된 요소를 포함할 만큼 커지기 때문에 float을 제거하는 효과가 나타나게 됩니다.”

글을 쓰던 당시에 overflow가 float된 요소를 포함하도록 박스 크기를 늘리는 명확한 이유는 몰랐습니다. CSS 2.1을 열심히 찾아봤는데 overflow 속성 설명에는 관련 내용이 전혀 없었거든요. 그래서 경험적인 추측일 뿐이었습니다.

그런데 어제 마진 병합에 관한 글을 쓰면서 그 원리가 CSS 2.1에 정확하게 명시되어 있다는 사실을 알게 되었습니다.

CSS를 이용해서 블록 레벨 요소를 배치하다보면 간혹 수직 방향으로 마진이 적용되지 않을 때가 있습니다. 이런 현상은 대부분 CSS의 중요한 레이아웃 모델 중 하나인 마진 병합(collapsing margins) 때문에 발생하는데 브라우저에 따라서 다르게 나타나는 경우가 많기 때문에 크로스 브라우징에 어려움을 주기도 합니다.

사실 마진 병합은 블록 레벨 요소의 height 결정 방식이나 float, overflow같은 다른 여러 가지 내용과 연결되어 있습니다. 이 글에서는 마진 병합의 정의와 계산 방법, 그리고 일반적인 문서 흐름(normal-flow)에서의 세 가지 마진 병합 패턴에 대해서만 알아보고 나머지 내용은 다음 글에서 이어가도록 하겠습니다.

† 기본적으로 마진 병합은 hasLayout 모델을 쓰는 IE 7 이하 브라우저에서는 정확하게 표현되지 않을 가능성이 큽니다. 관련된 버그도 상당히 많고요. 그러니 직접 테스트를 해보실 분들은 반드시 IE 8이나 파이어폭스, 오페라, 사파리 등의 브라우저를 사용하시기 바랍니다. ^^;

그리고 언제나 그렇듯이 설명에 오류가 있을 수도 있습니다. 오류를 알려주시면 즉시 반영하도록 하겠습니다.

현재 공식적인 CSS 최종 권고안은 1998년에 발표된 CSS 2이고, 이를 보완한 CSS 2 리비전 1(CSS 2.1)이 2007년 권고안 후보(CR: Candidated Recommendation)로서 발표되었습니다. 즉, CSS 2.1은 아직 최종 권고안이 아니고, 최종 권고안이 되기 위한 과정을 밟고 있는 단계지요.

그럼 한 가지 질문을 던져보겠습니다. 과연 CSS 2와 CSS 2.1 중 어떤 규격을 웹 브라우저 같은 사용자 에이전트가 더 잘 지원할까요? CR 단계에 있는 CSS 2.1일까요? 아니면 오래전에 만들어진 CSS 2일까요?

처음 CSS를 접했을 때 저는 당연히 CSS 2를 더 잘 지원할 것이라 믿었습니다. CSS 2.1은 불완전한 규격이라 생각했고, 무엇보다 인터넷 익스플로러 7, 파이어폭스 2, 오페라 9 등의 브라우저가 발표된 2006년 당시까지도 CSS 2.1은 초안(working draft) 단계에 머물고 있었으니까요.

하지만, 실제로 CSS 2 기능 중 상당수는 최신 브라우저에서도 아직 지원되지 않고 있습니다. 또한, W3C가 제공하는 CSS 검증 서비스 같은 경우 기본적으로 CSS 2.1을 기준으로 결과를 알려줍니다. 그렇다면 왜 이런 현상이 생겼을까요?

이런 의문에 대한 해답은 CSS 2.1 규격 소개에서 찾을 수 있습니다. 그 내용을 바탕으로 CSS 2.1이 왜 만들어졌고, 현재 어떠한 위치를 차지하고 있는지 알아보겠습니다.

W3C 권고안에서 자주 사용되는 용어 중 하나가 “규격을 따르는 사용자 에이전트(Conforming User Agent)”입니다. 이렇게 어떤 규격을 “따른다”거나 규격에 “부합한다”라는 의미로 사용되는 단어가 “conformance”인데 conformance에 대한 W3C의 정의는 다음과 같습니다.

conformance : 표준(standard)이나 지침(guideline), 규격(specification)의 모든 요구 사항을 만족함

다시 말해서 W3C가 제안한 각각의 규격에 부합하기 위한 요건들을 뜻하는데 그렇기 때문에 규격문에서 상당히 중요한 의미를 갖습니다. 일반적으로 각각의 규격문은 세부적인 설명(속성 설명 등)을 시작하기 전에 이런 요건들을 먼저 설명하는데 예를 들어서 HTML 4.01 권고안 4장, XHTML 1.0 권고안 3장, 그리고 이 글에서 다룰 CSS 2.1 권고안 3장에서 독립적으로 다루고 있습니다.

넓은 의미로 conformance는 규격문을 어떻게 해석하고 구현해야 하는지, 반드시 준수해야 하는 사항(requirements)과 권장 사항(recommandations)을 어떻게 구별해야 하는지를 알려줍니다. 사실 “어떤 사항을 지켜야 한다”라고 말하면 듣는 사람에 따라서 “반드시 지켜야 한다”고 생각할 수도 있고, “지키는 것이 좋다”라고 해석할 수도 있기 때문에 정확함이 필수인 규격문에서는 이런 구분을 명확히 할 필요가 있습니다. 또한, 규격문 전체가 핵심적인 준수 사항만을 다루지는 않습니다. 설명이나 예제도 있고 비공식적인 권장 사항도 있으니까요. 이런 부분에 대한 구분도 conformance에서 다루고 있습니다.

설명이 길었는데 그만큼 중요하다는 점을 강조하고 싶었기 때문입니다. 그러면 CSS 2.1의 conformance를 살펴볼까요?