웹을 작업하다 보면 텍스트가 줄바꿈 되지 않거나, 공백이 유지되지 않는 문제가 종종 발생합니다. 이럴 때 중요한 역할을 하는 것이 바로 white-space 속성입니다. 이 글에서는 white-space의 동작 방식과 속성값을 정리해보겠습니다.
1. white-space란?
white-space는 HTML 요소 안의 공백(whitespace)과 줄바꿈을 어떻게 처리할지를 결정하는 CSS 속성입니다.
보통 HTML 코드 상의 연속된 공백은 하나로 합쳐지고, 줄바꿈도 무시되지만, white-space 값을 변경하면 이 동작을 제어할 수 있습니다.
2. 주요 속성값
(1) normal (기본값)
- 연속된 공백은 하나로 합쳐짐
- 줄바꿈은 무시됨
- 영역 너비를 벗어나면 자동 줄바꿈 됨
p {
white-space: normal;
}👉 일반적인 문단 텍스트에 적용되는 기본 동작
(2) nowrap
- 연속된 공백은 하나로 합쳐짐
- 줄바꿈은 무시됨
- 절대 줄바꿈 되지 않음 (스크롤이 생김)
p {
white-space: nowrap;
}👉 버튼, 네비게이션 바 텍스트 등에 많이 활용
(3) pre
- HTML의 공백과 줄바꿈을 그대로 유지
- 자동 줄바꿈 되지 않음
p {
white-space: pre;
}👉
<pre>태그와 동일한 동작
👉 코드 블록, 시(詩) 형태의 텍스트 출력 등에 사용
(4) pre-wrap
- 공백과 줄바꿈을 그대로 유지
- 영역을 벗어나면 자동 줄바꿈 됨
p {
white-space: pre-wrap;
}👉 사용자 입력값(채팅, 게시판 글 등)을 그대로 보여주면서도 줄이 너무 길면 자동 줄바꿈 필요할 때 사용
(5) pre-line
- 연속된 공백은 하나로 합쳐짐
- 줄바꿈만 유지
- 영역을 벗어나면 자동 줄바꿈 됨
p {
white-space: pre-line;
}👉 시각적으로 깔끔하면서도 작성자가 의도한 줄바꿈을 유지할 수 있음
(6) break-spaces (CSS3 추가)
pre-wrap과 유사하지만,- 연속된 공백도 줄바꿈 기준으로 인식
- 줄 끝의 공백도 표시
p {
white-space: break-spaces;
}👉 공백을 의미 있는 데이터로 사용하는 특수한 경우에 사용
3. 속성값 비교표
| 값 | 연속 공백 | 줄바꿈 문자 | 자동 줄바꿈 |
|---|---|---|---|
| normal | 합침 | 무시 | O |
| nowrap | 합침 | 무시 | X |
| pre | 유지 | 유지 | X |
| pre-wrap | 유지 | 유지 | O |
| pre-line | 합침 | 유지 | O |
| break-spaces | 유지 | 유지 | O (공백도 기준) |
4. 활용 예시
(1) 버튼 텍스트 줄바꿈 방지
.button {
white-space: nowrap;
}(2) 사용자 입력값 그대로 보여주기
.chat-message {
white-space: pre-wrap;
}(3) 시나 글에서 줄바꿈 유지
.poem {
white-space: pre-line;
}5. 마무리
white-space 속성은 단순히 "공백 처리"만 제어하는 게 아니라,
텍스트의 레이아웃과 가독성을 결정짓는 중요한 요소입니다.
상황에 맞게 nowrap, pre-wrap, pre-line 등을 활용하면 훨씬 유연하고 원하는 텍스트 표현을 할 수 있습니다.
html_programming_language