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