이 모듈은 CSS 포맷팅(formatting) 박스(box) 트리(tree)가 도큐멘트(document) 요소(element) 트리(tree)에서 생성되는 방법을 설명하고 이를 제어하는 디스플레이 속성을 정의한다.
이 모듈은 HTML 문서 상의 요소가 화면에 어떻게 보여질 것인지에 대한 기술적인 주제를 다룬다. 다시 말해 요소가 화면 상의 공간을 어떤식으로 채워가면서 포함한 콘텐츠를 표시하느냐에 대한 기술적인 주제이다.
사실 콘텐츠가 표시되는 외형적인 관점은 일반 문서와 다르지 않다. 제목은 한 행을 차지하고 다음 행에는 몇 개의 단락이 위치하며 단락 내에서는 텍스트와 이미지가 표시된다. 목록은 항목당 행 단위로 세로 방향으로 표시되고 테이블은 셀을 가지고 있는 여러 행이 존재하고 그 행은 어떤 래퍼에 의해 공간을 가지게 된다. 셀에 텍스트 또는 이미지를 표시할 수 있다. 그리고 이미지 주변에 텍스트가 둘러싸이게 하는 것도 편집상 필요한 조치일 수도 있다.
기술적인 관점에서는 콘텐츠를 가지고 있는 요소가 박스(box)로써의 역할에 대해 다룬다. 여기서 박스(box)는 요소와는 다른 개념이다. 박스는 화면상에서 표시되는 성질을 가지고 있다. CSS 초기에는 몇 가지 성질을 가진 박스가 전부였다면 현재는 꽤나 다양한 성질을 가진 박스가 존재한다. 이 모듈은 이 박스를 제어하는 내용을 골자로 한다.
범위가 좁고 완전하게 정립되지 않았던 CSS 초기에 사용하던 용어는 기술적인 범위 확대로 개념의 정리가 필요할 것 같다. 용어를 한글화함에 따라 생길 수 있는 오해를 없애기 위해 영어 발음 그대로 한글로 옮기며 필요에 따라 괄호를 두어 실제 영어 명칭을 표기했다.
참고로 다음 대부분의 내용들은 CSS의 기술적인 내부 메커니즘(mechanism)에서 다루어지는 내용이므로 사용자는 display
속성의 값에 대한 성질과 특징, 활용에 중점을 두어 학습을 해도 무방하다.
block
, inline
, inline-block
등의 성질)<P>
)으로 형식이 지정된 요소의 그룹에 대한 추상적인 의미를 갖는다. 요소를 블록 수준으로 만들기 위해서 display
속성 값으로 block
, list-item
, table
을 포함한다. 이 블록 레벨 박스(block level box)는 블록 포맷팅 컨텍스트(block formatting context: 이하 BFC로 칭함)에 참여한다.writing-mode
에 따라 화면상에서 수직 방향 또는 수평 방향으로 흐른다.display
속성의 값으로 inline
, inline-table
, inline-block
값을 갖는 요소들이 대상이다. 인라인 레벨의 요소들은 인라인 포맷팅 컨텍스트(inline formatting context: 이하 IFC로 칭함)에 참여하는 인라인 레벨 박스(inline level box)를 생성한다.writing-mode
에 따라 화면상에서 오른쪽으로 또는 아래쪽으로 흐를 수 있다.display
속성 값으로 block
, list-item
, inline-block
값이 포함된다. 모든 블록 컨테이너 박스가 블록 레벨을 갖는 것은 아니다. 예를 들어서 테이블의 셀은 블록 컨테이너이지만 블록 레벨은 아니다.float
, 절대 위치(absolutely positioned)를 갖는 요소, 블록 박스가 아닌 블록 컨테이너(예: 인라인 블록, 테이블의 셀 및 캡션) 및 overflow
속성이 visible
값을 갖지 않으면서 오버플로우가 있는 블록 박스 콘텐츠에 대하여 새로운 블록 포맷팅 컨텍스트(BFC)를 설정한다.hidden
설정시 원래 가지고 있던 요소의 영역은 그대로 유지된다.