[css] CSS - break-after 속성 - 지정요소 뒤에서 (페이지분할/컬럼분할/영역분할) 발생 여부 지정 (= break-after속성 = 브레이크에프터속성)

1. break-after 예제 - 지정요소 뒤에 페이지분할 삽입
2. break-after 정의
3. break-after 구문

break-after 예제 - 지정요소 뒤에 페이지분할 삽입

 

@media print {

  footer {

    break-after: always;

  }

}

 

break-after 정의

 

지정요소 뒤에서 (페이지분할/컬럼분할/영역분할) 발생 여부 지정

 

---

 

1.

• CSS2의 page-break-after 속성을 확장함.
• break-after 속성 사용하면 지정요소 뒤에서 '페이지분할/컬럼분할/영역분할'을 브라우저에 지시하거나 요소가 두 페이지에 걸쳐 분할되어 확장되는 것을 방지 가능.

 

2.

• 기본값: auto
• 적용대상: block 레벨 요소
• 상속여부: X
• 애니가능: discrete (불연속) 방식
• CSS버전: CSS3
• JS구문: object.style.breakAfter="always";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

단, 속성값에 따라 지원 여부가 조금 다름.

 

4. MDN break-after 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

 

break-after 구문

 

selector {break-after: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;}

 

---

[속성값]

 

• auto - 브라우저가 '페이지분할' 자동 결정. (기본값)
• all - 주요 상자 바로 뒤에 '페이지분할' 삽입.
• always - 지정 요소 뒤에 '페이지분할' 항상 삽입.
• avoid - 지정요소 뒤에 '(페이지분할/컬럼분할/영역분할)' 회피.
• avoid-column - 지정요소 뒤에서 '컬럼분할' 회피.
• avoid-page - 지정요소 뒤에서 '페이지분할' 회피.
• avoid-region - 지정요소 뒤에서 '영역분할' 회피.
• column - 지정요소 뒤에 항상 '컬럼분할' 삽입.
• left - 지정요소 뒤에 한 또는 두 '페이지분할' 삽입해 다음 페이지가 왼쪽 페이지로 되도록 함.
• page - 지정요소 뒤에 항상 '페이지분할' 삽입.
• recto - 주요 상자 바로 뒤에 한 또는 두 '페이지분할' 삽입해 다음 페이지가 recto 페이지 되도록 함.
• region - 요소 뒤에 항상 '영역분할' 삽입.
• right - 요소 뒤에 한 또는 두 '페이지분할' 삽입해 다음 페이지가 오른쪽 페이지로 되도록 함.
• verso - 주요 상자 바로 앞에 한 또는 두 '페이지분할' 삽입해 다음 페이지가 verso 페이지 되도록 함.
• initial - 이 속성의 기본값 사용.
• inherit - 부모요소의 속성값 상속.

---

PS. 참고

• verso 페이지 - 책 펴칠 때, 이전페이지에 해당하는 페이지. (보통, 왼쪽)
• recto 페이지 - 책 펴칠 때, 다음페이지에 해당하는 페이지. (보통, 오른쪽)