[selector] CSS - :first 가상선택자 - 인쇄 문서의 첫번째 페이지 선택 (= first선택자 = 퍼스트선택자)

1. :first 예제 - 인쇄 문서의 첫번째 페이지 선택
2. :first 정의
3. :first 구문

:first 예제 - 인쇄 문서의 첫번째 페이지 선택

 

<style> 

@page :first { margin: 30% 0 0 40%;}

p { page-break-after: always; }

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>1 Page - 코딩언어 강의</p>

<p>2 Page - 그누보드 강의</p>

<p>아래 버튼 클릭해 인쇄 미리보기에서 효과 확인.</p>

<button>페이지 인쇄</button>

<script>

document.querySelector("button").addEventListener("click", () => {

  window.print();

});

</script>

 

결과보기

:first 정의

 

인쇄 문서의 첫번째 페이지 선택하는 선택자.

 

---

 

1. @page 규칙과 함께 사용. (예) @page :first

2. :first 선택자에서 사용 가능한 속성 종류

• margin 속성들 - 바깥 여백 관련 속성들. (예) margin, margin-top, margin-left, margin-bottom, marign-left
• orphans 속성- 여러 줄짜리 단락에서 페이지 하단에 최소한 몇 줄이 남아야 하는지를 지정. (기본값: 2)
• widows 속성 - 단락이 다음 페이지로 넘어갈 때, 페이지 상단에 최소 몇 줄이 있어야 하는지를 지정
• page-break 속성들 - 어디서 페이지를 나눌지 제어하는 속성들. (예) page-break-before, page-break-after, page-break-inside

 

3.

• CSS3
• IE8 이상 주요 최신 브라우저 모두 지원.

 

:first 구문

 

@page :first { CSS 선언; }