CSS에서 white-space 속성을 사용하면 요소 내부의 공백(띄어쓰기, 줄바꿈 등)이 어떻게 처리될지를 세밀하게 제어할 수 있습니다. HTML 문서에서는 기본적으로 연속된 공백이 하나로 합쳐지고 줄바꿈이 무시되지만, 이 속성을 활용하면 원본 텍스트의 형식을 그대로 유지하거나 자동 줄바꿈 방식을 변경할 수 있습니다.
white-space 속성의 주요 값
white-space 속성에는 여러 가지 값을 지정할 수 있으며, 대표적인 값은 다음과 같습니다.
- normal: 기본값으로, 연속된 공백을 하나로 합치고 필요에 따라 자동으로 줄바꿈합니다.
- pre: <pre> 태그처럼 동작하여, 소스 코드에 있는 공백과 줄바꿈을 그대로 유지합니다.
- nowrap: 공백은 합치지만 줄바꿈을 하지 않아 텍스트가 한 줄로 표시됩니다.
- pre-wrap: 공백과 줄바꿈을 유지하면서도 필요하면 자동으로 줄바꿈합니다.
예제
다음 예제는 두 개의 단락에 서로 다른 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>실행 결과 설명
위 코드를 브라우저에서 실행하면 다음과 같은 차이를 확인할 수 있습니다.
- demo1 (white-space: normal): 소스에 입력된 여러 개의 공백이 하나로 합쳐지고, 텍스트가 화면 너비에 맞춰 자동으로 줄바꿈됩니다.
- demo2 (white-space: pre): 소스 코드에 작성된 그대로 공백과 줄바꿈이 유지되어, 마치 코드 편집기에서 본 것처럼 표시됩니다.
정리
white-space 속성은 텍스트의 공백과 줄바꿈 처리를 제어하는 강력한 도구입니다. 일반적인 본문 텍스트에는 normal이나 pre-wrap이 적합하고, 코드 블록이나 ASCII 아트처럼 원본 형식을 그대로 보존해야 하는 경우에는 pre 또는 pre-line을 사용하는 것이 좋습니다.