CSS에서 white-space 속성은 텍스트가 화면에 배치되는 방식, 즉 줄 바꿈과 공백 처리를 제어하는 데 사용됩니다. 이 속성을 활용하면 HTML 소스 코드 안에 있는 공백과 줄 바꿈을 브라우저가 어떻게 해석할지 세밀하게 조정할 수 있습니다.
white-space 속성의 주요 값
white-space 속성에는 여러 가지 값을 지정할 수 있으며, 대표적인 값은 다음과 같습니다.
- normal: 기본값으로, 연속된 공백을 하나로 합치고 필요에 따라 자동으로 줄 바꿈합니다.
- nowrap: 공백은 하나로 합치되, 줄 바꿈을 하지 않습니다.
- pre: HTML <pre> 태그처럼 동작하여 소스 코드의 공백과 줄 바꿈을 그대로 유지합니다.
- pre-wrap: 공백과 줄 바꿈을 유지하면서도, 필요한 경우 자동으로 줄 바꿈이 일어납니다.
- pre-line: 연속된 공백은 하나로 합치지만, 줄 바꿈은 그대로 유지합니다.
예제
다음 코드는 white-space 속성에 pre 값을 적용하여 텍스트의 흐름을 제어하는 예제입니다. 실행해 보면 줄 바꿈이 <pre> 태그를 사용한 것처럼 그대로 유지되는 것을 확인할 수 있습니다.
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting tells the browser to honor
it just like the HTML pre tag.</p>
</body>
</html>위 예제에서 문단은 white-space: pre; 스타일이 적용되었기 때문에, 작성자가 입력한 줄 바꿈과 들여쓰기(공백)가 브라우저 화면에 그대로 반영됩니다. 일반적인 <p> 태그라면 무시되었을 부분까지도 원본 그대로 표시되는 점이 특징입니다.