CSS 고아(Orphans)와 미망인(Widows) 속성이란?
활판 인쇄 분야에서 고아(orphan)는 페이지가 나뉘면서 단락의 일부 줄이 이전 페이지 하단에 홀로 남겨진 것을 말하고, 미망인(widow)은 페이지 나눔 직후 다음 페이지 상단에 혼자 남게 되는 줄을 의미합니다.
일반적으로 인쇄물에서 텍스트가 한두 줄만 페이지 맨 위나 맨 아래에 떨어져 있으면 시각적으로 어색해 보입니다. 그래서 전문적인 조판 작업에서는 각 페이지의 상단과 하단에 최소 두 줄 이상의 텍스트가 함께 배치되도록 신경 쓰는 것이 원칙입니다.
orphans와 widows 속성의 역할
- orphans 속성: 페이지를 넘길 때 해당 페이지 하단에 반드시 남아 있어야 하는 단락의 최소 줄 수를 지정합니다.
- widows 속성: 페이지를 넘긴 후 다음 페이지 상단에 반드시 남아 있어야 하는 단락의 최소 줄 수를 지정합니다.
사용 예제
다음 예제는 각 페이지의 하단에 최소 4줄, 상단에 최소 2줄이 남도록 설정하는 코드입니다.
<style>
<!--
@page {
orphans: 4;
widows: 2;
}
-->
</style>참고 사항
orphans와 widows 속성은 주로 페이징 매체(paged media), 즉 인쇄 화면이나 PDF 출력처럼 내용이 여러 페이지로 나뉘는 환경에서 의미가 있습니다. 웹 브라우저에서 문서를 인쇄할 때 적용되며, 일반적인 화면 스크롤 환경에서는 눈에 띄는 효과가 없습니다. 또한 이 속성들은 @page 규칙이 아니라 p, div 같은 블록 요소에 직접 지정할 수도 있습니다.