레이아웃
break-before
엘리먼트 앞에서 컬럼이나 페이지가 어떻게 나뉠지 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
break-before-auto | break-before: auto; |
break-before-avoid | break-before: avoid; |
break-before-all | break-before: all; |
break-before-avoid-page | break-before: avoid-page; |
break-before-page | break-before: page; |
break-before-left | break-before: left; |
break-before-right | break-before: right; |
break-before-column | break-before: column; |
예제
기본 예제
break-before-column과 break-before-page 같은 유틸리티를 사용해 엘리먼트 앞에서 컬럼이나 페이지가 어떻게 나뉠지 제어할 수 있습니다:
<div class="columns-2"> <p>자, 내가 뭐라고 말할까요...</p> <p class="break-before-column">물론, 웃으세요...</p> <p>어쩌면 우리는 없이도 살 수 있을지도...</p> <p>보세요. 만약 이게...</p></div>반응형 디자인
접두사 a break-before 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="break-before-column md:break-before-auto ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
