CSS white-space 속성으로 요소 내 공백 제어하기

CSS의 white-space 속성을 사용하면 요소 내부의 공백(띄어쓰기, 줄바꿈, 탭 등)이 어떻게 처리될지 세밀하게 제어할 수 있습니다.

white-space 속성이란?

HTML 문서에서는 기본적으로 연속된 공백이 하나로 합쳐지고, 줄바꿈도 무시됩니다. 하지만 white-space 속성을 활용하면 이러한 기본 동작을 변경하여 원하는 방식으로 텍스트를 표시할 수 있습니다.

주요 값 비교

normal – 기본값으로, 연속된 공백을 하나로 합치고 필요에 따라 자동으로 줄바꿈합니다.
pre – <pre> 태그처럼 공백과 줄바꿈을 입력한 그대로 유지하며, 자동 줄바꿈이 일어나지 않습니다.

예제 코드

아래 예제는 두 개의 단락에 서로 다른 white-space 값을 적용하여 결과를 비교한 것입니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         p.demo1 {
            white-space: normal;
         }
         p.demo2 {
            white-space: pre;
         }
      </style>
   </head>
   <body>
      <h2>공백 제어하기</h2>
      <p class = "demo1">
         This is demo text.
         This is demo text.
      </p>
      <p class = "demo2">
         This is demo text.
         This is demo text.
      </p>
   </body>
</html>

실행 결과 설명

white-space: normal이 적용된 첫 번째 단락(demo1)은 여러 줄로 작성된 텍스트가 한 줄로 이어져 표시되며, 브라우저 창 크기에 맞춰 자동으로 줄바꿈됩니다.

반면 white-space: pre가 적용된 두 번째 단락(demo2)은 소스 코드에 작성된 공백과 줄바꿈이 그대로 화면에 반영되는 것을 확인할 수 있습니다.

참고: 그 외의 white-space 값

실무에서 자주 사용되는 추가 값들도 알아두면 유용합니다.

nowrap – 공백은 합치지만 절대 자동 줄바꿈하지 않습니다.
pre-wrap – 공백과 줄바꿈을 유지하면서도 필요 시 자동 줄바꿈을 허용합니다.
pre-line – 공백은 합치되 줄바꿈은 그대로 유지하고, 자동 줄바꿈도 허용합니다.

이처럼 white-space 속성을 상황에 맞게 활용하면 코드 블록, 시, 주소 등 형식이 중요한 콘텐츠를 정확하게 표현할 수 있습니다.