개요

이 모듈은 HTML 문서 상의 요소가 화면에 어떻게 보여질 것인지에 대한 기술적인 주제를 다룬다. 다시 말해 요소가 화면 상의 공간을 어떤식으로 채워가면서 포함한 콘텐츠를 표시하느냐에 대한 기술적인 주제이다.

사실 콘텐츠가 표시되는 외형적인 관점은 일반 문서와 다르지 않다. 제목은 한 행을 차지하고 다음 행에는 몇 개의 단락이 위치하며 단락 내에서는 텍스트와 이미지가 표시된다. 목록은 항목당 행 단위로 세로 방향으로 표시되고 테이블은 셀을 가지고 있는 여러 행이 존재하고 그 행은 어떤 래퍼에 의해 공간을 가지게 된다. 셀에 텍스트 또는 이미지를 표시할 수 있다. 그리고 이미지 주변에 텍스트가 둘러싸이게 하는 것도 편집상 필요한 조치일 수도 있다.

기술적인 관점에서는 콘텐츠를 가지고 있는 요소가 박스(box)로써의 역할에 대해 다룬다. 여기서 박스(box)는 요소와는 다른 개념이다. 박스는 화면상에서 표시되는 성질을 가지고 있다. CSS 초기에는  몇 가지 성질을 가진 박스가 전부였다면 현재는 꽤나 다양한 성질을 가진 박스가 존재한다. 이 모듈은 이 박스를 제어하는 내용을 골자로 한다.

용어

범위가 좁고 완전하게 정립되지 않았던 CSS 초기에 사용하던 용어는 기술적인 범위 확대로 개념의 정리가 필요할 것 같다. 용어를 한글화함에 따라 생길 수 있는 오해를 없애기 위해 영어 발음 그대로 한글로 옮기며 필요에 따라 괄호를 두어 실제 영어 명칭을 표기했다.

참고로 다음 대부분의 내용들은 CSS의 기술적인 내부 메커니즘(mechanism)에서 다루어지는 내용이므로 사용자는 display 속성의 값에 대한 성질과 특징, 활용에 중점을 두어 학습을 해도 무방하다.

박스(box)

요소(element)가 가질 수 있는 다양한 성질의 공간(예: block, inline, inline-block 등의 성질)

블록 레벨(block level)

시각적으로 블록(block)(예: <P>)으로 형식이 지정된 요소의 그룹에 대한 추상적인 의미를 갖는다. 요소를 블록 수준으로 만들기 위해서 display 속성 값으로 block, list-item, table을 포함한다. 이 블록 레벨 박스(block level box)는 블록 포맷팅 컨텍스트(block formatting context: 이하 BFC로 칭함)에 참여한다.

블록 박스(block box)

블록 컨테이너(block container) 개념이면서 블록 레벨(block level)인 박스를 나타내며 블록 포맷팅 컨텍스트(BFC)에 참여한다. writing-mode에 따라 화면상에서 수직 방향 또는 수평 방향으로 흐른다.

어나니머스 블록 박스(anonymous block box)

블록 컨테이너 박스 내에 블록 레벨의 박스와 인라인 레벨의 박스가 인접해 있는 경우 인라인 레벨의 박스를 익명(anyonmous)의 블록 박스가 감싸는데 이것을 어나니머스 블록 박스(anonymous block box)라 한다.

인라인 레벨(inline level)

새로운 콘텐츠 블록을 형성하지 않는 소스 상의 요소(예: span) 그룹을 의미하며 콘텐츠가 라인(line)으로 배포된다. display 속성의 값으로 inline, inline-table, inline-block 값을 갖는 요소들이 대상이다. 인라인 레벨의 요소들은 인라인 포맷팅 컨텍스트(inline formatting context: 이하 IFC로 칭함)에 참여하는 인라인 레벨 박스(inline level box)를 생성한다.

인라인 박스(inline box)

인라인 레벨(inline level)이면서 콘텐츠(보통 텍스트)를 감싸는 박스(어나니머스 인라인 박스 포함)들을 나타내며 인라인 포맷팅 컨텍스트(IFC)에 참여한다. writing-mode에 따라 화면상에서 오른쪽으로 또는 아래쪽으로 흐를 수 있다.

어나니머스 인라인 박스(anonymous inline box)

블록 컨테이너 박스 내에 텍스트와 인라인 레벨이 존재하는 경우 텍스트를 감싸는 익명(anonymous)의 인라인 박스를 의미한다.

박스 트리(box tree)

소스상의 하나의 요소는 CSS의 단일 박스로 처리된다. 그리고 필요에 따라 익명(anonymous) 박스를 생성한다. 요소의 중첩 구조에 따른 렌더링 과정에서 CSS에서 생성하는 박스 트리를 의미한다.

블록 컨테이너 박스(block container box)

블록 레벨 또는 블록 레벨이 아니더라도 어나니머스 블록 박스를 갖는 콘텐츠를 포함하거나 인라인 레벨 박스만을 포함하는 박스를 의미한다. display 속성 값으로 block, list-item, inline-block 값이 포함된다. 모든 블록 컨테이너 박스가 블록 레벨을 갖는 것은 아니다. 예를 들어서 테이블의 셀은 블록 컨테이너이지만 블록 레벨은 아니다.

라인 박스(line box)

컨테인 블록(contain block)내에서 인라인 박스들이 배치될 때 공간의 크기에 따라 여러 줄의 라인을 형성하는데 이것을 라인 박스(line box)라 한다.

블록 포맷팅 컨텍스트(block formatting context: BFC)

float, 절대 위치(absolutely positioned)를 갖는 요소, 블록 박스가 아닌 블록 컨테이너(예: 인라인 블록, 테이블의 셀 및 캡션) 및 overflow 속성이 visible 값을 갖지 않으면서 오버플로우가 있는 블록 박스 콘텐츠에 대하여 새로운 블록 포맷팅 컨텍스트(BFC)를 설정한다.

블록 포맷팅 컨텍스트에서 박스는 컨테인 블록(contain block)의 맨 위에서 시작하여 수직으로 차례대로 배치된다. 자세한 내용은 블록 양식화 문맥(Block Formatting Context:BFC)을 참고하기 바란다.

인라인 포맷팅 컨텍스트(inline formatting context: IFC)

박스가 컨테인 블록(contain block)의 맨 위에서 시작하여 수평으로 차례대로 배치되는 양식을 인라인 포맷팅 컨텍스트라 한다.

관련 속성