wystan's tales

굉장히 좋은 자바스크립트 강좌가 있어 소개합니다. 영문이라는 한계가 있지만 “굉장히”라는 수식어가 모자랄 만큼 좋은 글입니다. 이렇게 좋은 글이 많이 알려지지 않은 건 글 제목이 자바스크립트가 아닌 “ECMAScript”여서가 아닐까 하는데요. ECMAScript는 자바스크립트의 기반이 되는 스크립트 언어로 ECMA International 표준화한 언어입니다.

소개하려는 글은 자바스크립트 프로그래머이자 ECMAScript 이론가라고 자신을 소개하고 있는 Dmitry A. Soshnikov 블로그를 통해서 발표한 글입니다. 현재까지 발표한 글은 자바스크립트의 핵심을 한 페이지로 요약한 “JavaScript, The Core”와 ECMA-262의 세 번째 버전(edition)을 상세하게 설명하는 “ECMA-262-3 in detail”, 그리고 최신 버전을 다루는 “ECMA-262-5 in detail”, 마지막으로 네 개의 노트(note)로 구성되어 있습니다.

CSS3 미디어 쿼리 모듈은 웹의 미래에 있어서 굉장히 중요한 의미를 갖습니다. 미디어의 종류(type)별로만 스타일을 다르게 줄 수 있었던 이전과는 달리 미디어 각각의 특성(feature)에 맞춰서 스타일에 변화를 줄 수 있기 때문이지요.

그 배경에는 웹에 접근할 수 있는 장치의 다양성이 점점 커지는 현상과, 이렇게 다양한 장치에서의 뷰를 효과적으로 컨트롤하기 위한 W3C의 고심이 있습니다.

그리고 놀랍게도 W3C의 고심은 우리가 생각하는 것보다 훨씬 일찍 시작되었습니다. 우리에게 익숙한 오래된 표준, 즉 HTML 4.01에서 이미 이런 미래를 고려한 장치를 만들어 놓았기 때문입니다. HTML 4.01이 표준이 된 게 1999년이니 벌써 10년도 전이네요.

† HTML 4.01 이전에도 관련된 내용이 있을지도 모르지만 확인은 안 해봤습니다.

이 글에서는 HTML 4.01이 미디어 쿼리를 위해 어떤 대비를 했는지, 그리고 그 결과 만들어진 미디어 쿼리의 only라는 키워드에 대한 얘기를 해볼까 합니다. 미디어 쿼리가 무엇이고, 또 어떻게 사용하는지에 관해서는 이미 웹에 많은 정보가 있으니 다루지 않습니다.

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이나 파이어폭스, 오페라, 사파리 등의 브라우저를 사용하시기 바랍니다. ^^;

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