[css] CSS - break-before 속성 - 지정요소 앞에서 (페이지중단/컬럼중단/영역중단) 발생 여부 지정 (= break-before속성 = 브레이크비포어속성)

1. break-before 예제 - 지정요소 앞에 페이지 나누기 추가
2. break-before 정의
3. break-before 구문

break-before 예제 - 지정요소 앞에 페이지 나누기 추가

 

@media print {

  footer {

    break-before: always;

  }

}

 

break-before 정의

 

지정요소 앞에서 (페이지나누기/컬럼나누기/영역나누기) 발생 여부 지정

 

---

 

1.

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

 

2.

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

 

3.

IE10 이상 주요 최신 브라우저 모두 지원.

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

 

4. MDN break-before 예제보기

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

 

break-before 구문

 

selector {break-before: 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 페이지 - 책 펴칠 시, 다음페이지에 해당하는 페이지. (보통, 오른쪽)