CSS 페이지 미디어란 무엇인가?
페이지 미디어(Paged Media)는 연속 미디어(Continuous Media)와 근본적으로 다른 방식으로 동작합니다. 연속 미디어가 화면 위에서 끊김 없이 콘텐츠를 흐르듯 표현하는 반면, 페이지 미디어는 문서의 내용을 하나 이상의 독립된 페이지로 분할하여 출력합니다.
대표적인 페이지 미디어의 예는 다음과 같습니다.
- 종이에 인쇄된 문서
- OHP 필름 같은 투명 시트(transparencies)
- 컴퓨터 화면에 페이지 단위로 표시되는 문서
페이지 박스(Page Box)의 개념
CSS2 명세는 페이지 박스(page box)라는 개념을 정의합니다. 페이지 박스란 콘텐츠가 실제로 렌더링되는, 크기가 유한한(finite) 상자를 의미합니다. 즉, 각 페이지마다 하나의 페이지 박스가 생성되며, 그 안에 해당 페이지의 내용이 배치됩니다.
이 페이지 박스는 직사각형 영역으로, 다음 두 가지 영역으로 구성됩니다.
1. 페이지 영역(Page Area)
페이지 영역은 해당 페이지 위에 실제로 배치되는 박스들을 포함하는 공간입니다. 페이지 영역의 경계(edge)는 페이지 나눔(page break) 사이에서 발생하는 레이아웃의 초기 컨테이닝 블록(initial containing block) 역할을 합니다. 쉽게 말해, 각 페이지 안에서 요소들이 위치를 계산할 때 기준이 되는 영역이라고 할 수 있습니다.
2. 마진 영역(Margin Area)
마진 영역은 페이지 영역을 둘러싸고 있는 바깥쪽 여백 공간입니다. 이 영역에는 페이지 번호나 문서 제목처럼 페이지마다 반복적으로 표시되는 정보를 배치할 수 있습니다.
정리
페이지 미디어에서 CSS는 문서를 여러 개의 페이지로 나누고, 각 페이지를 '페이지 박스'라는 유한한 상자로 다룹니다. 페이지 박스는 실제 콘텐츠가 놓이는 페이지 영역과 그 주변의 마진 영역으로 구성되며, 이 구조를 이해하면 인쇄용 스타일(@page 규칙 등)을 더욱 정확하게 설계할 수 있습니다.