CSS의 white-space 속성은 요소 내부에서 텍스트가 처리되는 방식을 제어하는 속성입니다. 이 속성을 사용하면 텍스트의 흐름과 서식을 세밀하게 조정할 수 있으며, 특히 줄바꿈(line break)과 공백(whitespace)이 어떻게 표시될지 결정할 수 있습니다.
white-space 속성의 주요 값
white-space 속성에는 여러 가지 값을 지정할 수 있으며, 각 값에 따라 텍스트 렌더링 방식이 달라집니다.
- normal – 기본값으로, 연속된 공백을 하나로 합치고 필요에 따라 자동으로 줄바꿈합니다.
- nowrap – 공백은 하나로 합치지만, 줄바꿈은 발생하지 않습니다.
- pre – HTML의 <pre> 태그처럼 동작합니다. 공백과 줄바꿈을 그대로 유지하며, 자동 줄바꿈은 일어나지 않습니다.
- pre-wrap – 공백과 줄바꿈을 유지하면서도, 필요한 경우 자동으로 줄바꿈이 발생합니다.
- pre-line – 연속된 공백은 하나로 합치지만, 코드상의 줄바꿈은 그대로 유지됩니다.
사용 예제
아래 예제는 white-space 속성에 pre 값을 적용한 코드입니다. 이 설정을 사용하면 브라우저가 HTML의 <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 속성은 코드 블록, 시(詩)처럼 형식이 중요한 텍스트, 또는 줄바꿈을 강제로 유지해야 하는 콘텐츠를 다룰 때 특히 유용합니다. 상황에 맞는 값을 선택하면 별도의 추가 마크업 없이도 원하는 텍스트 배치를 손쉽게 구현할 수 있습니다.