Tailwind CSS break-before 유틸리티: 종합 가이드

※ (개인적으로) 웹 개발을 진행하면서 사용 경험이 적은 기능입니다.

 

break-before 클래스를 잘 활용하면, 인쇄 및 다중 열 레이아웃에서 페이지, 열 또는 영역의 흐름을 정확하게 제어할 수 있습니다.

 

break-before란?

CSS의 break-before 속성은 요소 앞에 페이지, 열 또는 영역의 구분을 삽입하는 데 사용됩니다. 이는 인쇄 문서와 다중 열 레이아웃에서 콘텐츠 흐름을 제어하는 데 특히 유용합니다.

 

break-before를 사용해야 하는 이유

break-before를 사용하면 다음과 같은 상황에서 콘텐츠의 가독성과 구조를 크게 향상시킬 수 있습니다:

• 인쇄 문서: 중요한 섹션이 항상 새로운 페이지에서 시작되도록 보장합니다.

• 다중 열 레이아웃: 콘텐츠가 깔끔하고 정돈된 레이아웃을 유지할 수 있도록 구분을 관리합니다.

• 영역 구분: 복잡한 레이아웃에서 CSS 영역의 콘텐츠 흐름을 제어합니다.

 

Tailwind CSS에서 break-before 사용하기

Tailwind CSS는 break-before 속성을 쉽게 처리할 수 있는 유틸리티 클래스를 제공합니다. 다음은 사용 가능한 클래스들입니다:

• break-before-auto: 요소 앞에 페이지, 열 또는 영역 구분을 삽입하지 않습니다. CSS의 초기값으로 설정

• break-before-avoid: 요소 앞에 페이지, 열 또는 영역 구분이 발생하지 않도록 합니다. 구분을 피하고 싶을 때 유용합니다.

• break-before-all: 모든 종류의 구분(페이지, 열, 영역)이 요소 앞에 삽입되도록 강제합니다.

• break-before-avoid-page: 요소 앞에 페이지 구분이 발생하지 않도록 합니다. 페이지가 바뀌지 않도록 합니다.

• break-before-page: 요소 앞에 페이지 구분을 삽입합니다. 즉 요소가 새로운 페이지에서 시작하도록 합니다.

• break-before-left: 요소가 왼쪽 페이지에서 시작하도록 강제합니다. 주로 양면 인쇄에서 사용됩니다.

• break-before-right: 요소가 오른쪽 페이지에서 시작하도록 강제합니다. 주로 양면에서 사용됩니다.

• break-before-column: 요소 앞에 열 구분을 삽입합니다. 즉 요소가 새로운 열에서 시작하도록 합니다.

이 클래스들은 HTML에서 직접 사용하여 콘텐츠 구분을 제어할 수 있습니다.

 

예시 1: 인쇄 문서에서 새로운 페이지 시작하기

인쇄 문서에서는 특정 섹션이 항상 새로운 페이지에서 시작되도록 설정할 수 있습니다.

 

<div class="break-before-page">
  <h2>2장</h2>
  <p>2장의 내용...</p>
</div>

 

예시 2: 열 구분 관리하기

다중 열 레이아웃에서 콘텐츠가 열 사이에서 어떻게 구분되는지 제어할 수 있습니다.

 

<div class="columns-2">
  <div class="break-before-column">
    <h2>새 섹션</h2>
    <p>새 섹션의 내용...</p>
  </div>
</div>

 

Tailwind CSS의 break-before 유틸리티는 인쇄 문서와 다중 열 레이아웃에서 콘텐츠 흐름을 관리할 수 있는 강력한 도구입니다. 이러한 클래스를 이해하고 활용하면, 더 가독성 높고 구조화된 문서와 레이아웃을 만들 수 있습니다.