white-space 속성으로 공백과 줄바꿈 제어하기

웹 개발을 하다 보면 텍스트의 공백과 줄바꿈을 원하는 대로 제어하고 싶을 때가 있습니다. 코드 블록을 예쁘게 보여주거나, 시나 주소처럼 줄바꿈이 중요한 콘텐츠를 표시할 때 말이죠. 바로 이때 white-space 속성이 빛을 발합니다!

white-space가 제어하는 것들

white-space 속성이 제어하는 건 크게 세 가지예요. 스페이스와 탭 같은 공백 문자의 처리 방식, 줄바꿈 문자(\n)의 처리 방식, 그리고 자동 줄바꿈 여부입니다.

<!-- HTML -->
<div>
  여러    공백과
  줄바꿈이
  있는 텍스트
</div>

div {
  white-space: pre; /* 공백과 줄바꿈을 그대로 유지 */
}

핵심 속성값들 완전 정복

각 속성값이 실제로 어떻게 다른지 좁은 컨테이너에 같은 텍스트를 넣고 비교해볼게요.

속성값별 상세 분석

실무 활용 패턴

1. 코드 블록 스타일링

코드 블록에서는 들여쓰기와 줄바꿈을 그대로 살려야 읽힙니다. 이럴 때 pre-wrap이 가장 자주 쓰여요.

2. 주소나 시 표시하기

주소나 시는 줄바꿈은 살리되 중간에 낀 불필요한 공백은 한 칸으로 정리되는 게 자연스럽죠. 이럴 땐 pre-line이 딱입니다.

3. 긴 텍스트 한 줄 유지하기

테이블 셀이나 내비게이션 메뉴에서는 텍스트가 한 줄로 유지되어야 할 때가 많습니다. 이럴 땐 nowrap을 overflow와 함께 쓰는 게 정석이에요.

브라우저 호환성과 주의사항

다만 몇 가지는 기억해두는 게 좋습니다. 성능 측면에서 pre나 pre-wrap은 매우 긴 텍스트의 렌더링에 부담을 줄 수 있고요. 접근성 관점에서는 스크린 리더가 공백과 줄바꿈을 어떻게 읽을지 따로 고민이 필요합니다. 그리고 모바일처럼 좁은 화면에서는 nowrap보다 pre-wrap이나 pre-line이 훨씬 안전한 선택이 되는 경우가 많아요.

마무리

white-space 속성을 마스터하면 텍스트 레이아웃을 훨씬 정교하게 제어할 수 있습니다. 특히 코드 블록, 시, 주소 같은 특별한 형식의 텍스트를 다룰 때 필수적인 도구입니다.

다음 편에서는 word-break와 white-space를 조합한 실무 패턴들을 살펴보겠습니다. 반응형 디자인에서 텍스트가 어떻게 동작해야 하는지, 다국어 사이트에서는 어떤 점을 고려해야 하는지 등 실전 노하우를 공유해드릴게요!