CSS Paged Media: 초보자를 위한 종합 가이드
안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 CSS Paged Media의 fascinzing 세계로 뛰어들어 보겠습니다. 이전에 들어본 적이 없다면 걱정 마세요 - 우리는 매우 기본적인 것부터 시작하여 차례대로 진행할 것입니다. 이 튜토리얼의 끝까지 따라오면, CSS를 사용하여 놀라운 인쇄 레이아웃을 만들 수 있을 것입니다. 그麼, 시작해 보겠습니다!
CSS Paged Media는 무엇인가요?
CSS Paged Media는 인쇄나 PDF와 같은 페이지 형식에서 웹 콘텐츠가 어떻게 보이는지 제어할 수 있게 해주는 CSS 기능의 모음입니다. 마치 웹사이트를 프린터용으로 리모델링하는 것과 같은 느낌입니다!
아름다운 웹사이트를 만들었지만 인쇄 시 모든 것이 지저분하고 자리를 잃은 것처럼 보인다면, CSS Paged Media가 구원자가 됩니다! 화면이 아닌 곳에서도 레이아웃을 제어할 수 있도록 도와줍니다.
CSS Paged Media - 관련 속성
CSS Paged Media의 마법을 가능하게 하는 중요한 속성들을 살펴보겠습니다:
| 속성 | 설명 | 예시 |
|---|---|---|
| @page | 페이지의 크기와 여백을 정의합니다 | @page { size: A4; margin: 2cm; } |
| size | 페이지 상자의 크기를 설정합니다 | size: 8.5in 11in; |
| marks | 문서에 자르기와/또는 십자 표시를 추가합니다 | marks: crop cross; |
| bleed | 인쇄 콘텐츠의 bleed 영역을 지정합니다 | bleed: 0.5cm; |
| page-break-before | 요소 앞의 페이지 분할을 제어합니다 | page-break-before: always; |
| page-break-after | 요소 뒤의 페이지 분할을 제어합니다 | page-break-after: avoid; |
| page-break-inside | 요소 내부의 페이지 분할을 제어합니다 | page-break-inside: avoid; |
다음은 이러한 속성들을 실제로 사용하는 예제입니다:
@page {
size: A4;
margin: 2cm;
@top-center {
content: "My Awesome Document";
}
@bottom-right {
content: counter(page);
}
}
h1 {
page-break-before: always;
}
table {
page-break-inside: avoid;
}이 예제에서 우리는 A4 페이지 크기와 2cm 여백을 설정하고, 각 페이지의 상단 중앙에 헤더를 추가하며, 하단 오른쪽에 페이지 번호를 추가하고 있습니다. 또한, 각 h1 요소가 새로운 페이지에서 시작하도록 하고, 테이블이 페이지를 가로질러 나뉘지 않도록 설정합니다.
CSS at-규칙
CSS at-규칙은 CSS가 어떻게 행동할지 지시하는 문장입니다. at-규칙은 at 기호(@)와 식별자로 시작됩니다. Paged Media에 특화된 at-규칙을 살펴보겠습니다:
| At-규칙 | 설명 | 예시 |
|---|---|---|
| @page | 페이지 상자를 정의합니다 | @page :first { margin-top: 10cm; } |
| @top-left | 페이지의 상단 왼쪽 모서리에 콘텐츠를 정의합니다 | @top-left { content: "Chapter 1"; } |
| @top-center | 페이지의 상단 중앙에 콘텐츠를 정의합니다 | @top-center { content: "My Book"; } |
| @top-right | 페이지의 상단 오른쪽 모서리에 콘텐츠를 정의합니다 | @top-right { content: date("yyyy-mm-dd"); } |
| @bottom-left | 페이지의 하단 왼쪽 모서리에 콘텐츠를 정의합니다 | @bottom-left { content: "Confidential"; } |
| @bottom-center | 페이지의 하단 중앙에 콘텐츠를 정의합니다 | @bottom-center { content: "Copyright 2023"; } |
| @bottom-right | 페이지의 하단 오른쪽 모서리에 콘텐츠를 정의합니다 | @bottom-right { content: counter(page); } |
다음은 이러한 at-규칙들을 사용하는 예제입니다:
@page {
@top-center {
content: "Alice's Adventures in Wonderland";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Page " counter(page);
}
}
@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}이 예제에서 우리는 각 페이지에 책 제목을 추가하고, 하단 오른쪽에 페이지 번호를 추가하고 있습니다. 또한, 첫 페이지에서는 이 요소들을 제거하여 깨끗한 표지를 만듭니다.
CSS 가상 클래스
가상 클래스는 요소의 특별한 상태를 정의하는 데 사용됩니다. Paged Media의 맥락에서는 몇 가지 유용한 가상 클래스가 있습니다:
| 가상 클래스 | 설명 | 예시 |
|---|---|---|
| :first | 첫 번째 페이지를 선택합니다 | @page :first { margin-top: 10cm; } |
| :left | 모든 왼쪽 페이지를 선택합니다 | @page :left { margin-left: 4cm; } |
| :right | 모든 오른쪽 페이지를 선택합니다 | @page :right { margin-right: 4cm; } |
| :blank | 모든 공백 페이지를 선택합니다 | @page :blank { @top-center { content: none; } } |
다음은 이러한 가상 클래스들을 사용하는 예제입니다:
@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "Alice's Adventures in Wonderland";
}
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "Chapter " counter(chapter);
}
}이 예제에서 우리는 첫 페이지, 왼쪽 페이지, 오른쪽 페이지에 대해 다른 레이아웃을 만들고 있습니다. 첫 페이지는 더 큰 상단 여백과 헤더/푸터가 없으며, 왼쪽 페이지는 책 제목이 상단 왼쪽 모서리에 있고, 오른쪽 페이지는 장 번호가 상단 오른쪽 모서리에 있습니다.
결론
그麼, 여러분! 우리는 CSS Paged Media의 fascinzing 세계를 여행했습니다. 페이지 크기와 여백 설정에서부터 페이지 분할과 헤더 및 푸터 추가까지, CSS를 사용하여 아름다운 인쇄 레이아웃을 만드는 도구를 가지셨습니다.
기억해 두세요, 연습이 완벽을 이루게 합니다. 이 속성과 at-규칙들을 자신의 프로젝트에서 실험해 보세요. 인쇄 레이아웃에 얼마나 많은 제어력을 가질 수 있는지 놀라실 겁니다!
행복한 코딩을 기원하며, 인쇄물이 항상 명료하고 아름답기를 바랍니다!
Credits: Image by storyset