CSS의 break-after, break-before, break-inside 속성은 페이지, 열, 또는 섹션이 어떻게 나뉘어야 하는지 제어하는 데 사용됩니다. 특히 인쇄 미디어나 다단 레이아웃 같은 복잡한 레이아웃에서 콘텐츠의 흐름을 관리하는 데 중요한 역할을 합니다. 이 문서에서는 각각의 속성이 어떻게 작동하는지와 사용 가능한 값들에 대해 설명합니다.
break-after 속성은 특정 요소 뒤에 페이지, 열, 또는 섹션 구분을 추가할지 결정합니다. 이 속성은 요소가 끝난 후 콘텐츠가 어떻게 이어질지를 제어합니다.
auto: 브라우저가 자동으로 페이지나 열을 나눌지 결정합니다.avoid: 페이지나 열을 가능한 피합니다.always: 항상 다음 페이지나 열에서 새 요소를 시작합니다.all: 모든 분할 지점에서 구분이 발생할 수 있습니다.avoid-page: 페이지 구분을 피합니다.page: 새로운 페이지에서 콘텐츠를 시작합니다.left: 다음 페이지가 왼쪽 페이지에서 시작됩니다.right: 다음 페이지가 오른쪽 페이지에서 시작됩니다.recto: 다음 'recto' 페이지(오른쪽 페이지)에서 시작됩니다.verso: 다음 'verso' 페이지(왼쪽 페이지)에서 시작됩니다.avoid-column: 열 구분을 피합니다.column: 다음 열에서 시작합니다.avoid-region: 구역 구분을 피합니다.region: 다음 구역에서 시작합니다.inherit: 부모 요소로부터 상속합니다.initial: 기본값으로 설정합니다 (auto).revert: 사용자 정의 스타일을 무시하고 기본값을 적용합니다.revert-layer: 상위 스타일 레이어에서 속성을 되돌립니다.unset: 상속이 가능하면 상속, 그렇지 않으면 기본값을 사용합니다.
break-before 속성은 요소 앞에서 페이지, 열, 또는 섹션 구분을 추가할지 여부를 결정합니다. 즉, 새로운 요소가 나타나기 전에 구분이 발생하도록 설정하는 속성입니다.
auto: 브라우저가 자동으로 결정합니다.avoid: 가능한 구분을 피합니다.always: 항상 다음 페이지나 열에서 새 요소를 시작합니다.all: 모든 구분 지점에서 구분을 허용합니다.avoid-page: 페이지 구분을 피합니다.page: 새로운 페이지에서 콘텐츠가 시작됩니다.left: 다음 페이지를 왼쪽 페이지에서 시작합니다.right: 다음 페이지를 오른쪽 페이지에서 시작합니다.recto: 다음 'recto' 페이지(오른쪽 페이지)에서 시작됩니다.verso: 다음 'verso' 페이지(왼쪽 페이지)에서 시작됩니다.avoid-column: 열 구분을 피합니다.column: 다음 열에서 시작합니다.avoid-region: 구역 구분을 피합니다.region: 다음 구역에서 시작합니다.inherit: 부모 요소로부터 상속합니다.initial: 기본값으로 설정합니다 (auto).revert: 사용자 정의 스타일을 무시하고 기본값을 적용합니다.revert-layer: 상위 스타일 레이어에서 속성을 되돌립니다.unset: 상속이 가능하면 상속, 그렇지 않으면 기본값을 사용합니다.
break-inside 속성은 요소 내부에서 페이지, 열, 또는 섹션 구분이 발생할지 여부를 제어합니다. 이 속성은 요소가 나뉘지 않고 한 페이지나 열 안에 있도록 제어할 때 유용합니다.
auto: 브라우저가 자동으로 구분 여부를 결정합니다.avoid: 페이지, 열, 또는 구역이 나뉘는 것을 피합니다.avoid-page: 페이지 나눔을 피합니다.avoid-column: 열 나눔을 피합니다.avoid-region: 구역 나눔을 피합니다.inherit: 부모 요소로부터 상속합니다.initial: 기본값으로 설정합니다 (auto).revert: 사용자 정의 스타일을 무시하고 기본값을 적용합니다.revert-layer: 상위 스타일 레이어에서 속성을 되돌립니다.unset: 상속이 가능하면 상속, 그렇지 않으면 기본값을 사용합니다.
break-after, break-before, break-inside 속성은 페이지, 열 또는 섹션의 구분을 제어하여 콘텐츠의 흐름을 세밀하게 조정할 수 있는 중요한 CSS 속성입니다. 이 속성들을 적절히 활용하면 인쇄 레이아웃, 다단 레이아웃 등 다양한 상황에서 가독성과 레이아웃을 최적화할 수 있습니다. 각각의 값을 이해하고 상황에 맞게 사용함으로써 콘텐츠가 의도한 대로 잘 나누어지고 표시될 수 있습니다.