CSS white-space 속성 정리

게시일: 24. 11. 20. 수정일: 24. 12. 23.

소요 시간: 5분 조회수: 47

white-space 속성은 CSS에서 텍스트 내 공백(white space)과 줄바꿈을 어떻게 처리할지를 정의하는 데 사용된다. HTML 페이지를 구성할 때 텍스트가 원하는 대로 표현되지 않는 경우가 많다.

특히 공백 처리와 자동 줄바꿈 제어가 중요한 경우 white-space 속성은 매우 유용하다. 이 글에서는 white-space 속성의 기본 개념, 다양한 값의 사용법, 그리고 예제와 함께 구체적인 활용법을 소개한다.

1. white-space 속성이란?

CSS white-space 속성은 텍스트 안에서 공백(스페이스), 탭(tab), 줄바꿈(newline)과 같은 문자를 어떻게 처리할지 결정한다.

예를 들어, 여러 개의 공백을 하나로 줄일 것인지, 줄바꿈을 허용할 것인지 등을 지정할 수 있다.

이 속성은 브라우저가 텍스트를 렌더링하는 방식을 제어하며, 특히 텍스트의 가독성을 높이거나 레이아웃을 조정할 때 효과적으로 사용된다.

white-space 속성의 이름에 대한 이해

white-space 속성의 이름은 주로 텍스트 내의 "공백(white space)" 처리와 관련이 있다.

HTML에서 공백 문자, 줄바꿈 등을 다룰 때, 이 속성이 텍스트를 어떻게 렌더링할지 제어하기 때문에 관련 개념에서 이름을 따왔다.

공백 문자와 줄바꿈 처리: HTML 문서에서 공백이나 줄바꿈은 사용자의 의도와 다르게 표현될 수 있습니다. white-space 속성은 이를 제어하기 위해 설계되었다.
CSS의 직관적 네이밍: CSS 속성들은 대부분 직관적으로 그 기능을 설명하는 이름을 가진다. white-space 역시 공백과 줄바꿈 처리라는 본질적인 역할을 반영한 이름이다.

2. white-space 속성의 주요 값

white-space 속성은 여러 가지 값을 가질 수 있으며, 각각은 텍스트의 공백과 줄바꿈을 다르게 처리한다.

normal (기본값)
- 연속된 공백은 하나의 공백으로 처리된다.
- 텍스트는 컨테이너 너비에 따라 자동으로 줄바꿈된다.
nowrap
- 모든 공백은 단일 공백으로 처리된다.
- 텍스트는 한 줄로 유지되며, 자동 줄바꿈이 허용되지 않는다.
pre
- 공백과 줄바꿈이 그대로 유지된다.
- 텍스트는 자동 줄바꿈되지 않고 고정폭 글꼴로 표시된다.
pre-line
- 연속된 공백은 하나로 줄어들지만 줄바꿈은 유지된다.
- 텍스트는 컨테이너의 너비를 초과할 경우 자동으로 줄바꿈된다.
pre-wrap
- 공백과 줄바꿈을 모두 유지한다.
- 텍스트는 컨테이너 너비에 따라 자동으로 줄바꿈될 수 있다.

3. 예제 코드

다음은 white-space 속성의 다양한 값을 적용한 예제 코드다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>White-space 속성 예제</title>
    <style>
        .normal { white-space: normal; border: 1px solid #000; padding: 10px; width: 200px; }
        .nowrap { white-space: nowrap; border: 1px solid #000; padding: 10px; width: 200px; }
        .pre { white-space: pre; border: 1px solid #000; padding: 10px; width: 200px; }
        .pre-line { white-space: pre-line; border: 1px solid #000; padding: 10px; width: 200px; }
        .pre-wrap { white-space: pre-wrap; border: 1px solid #000; padding: 10px; width: 200px; }
    </style>
</head>
<body>
    <h3>white-space: normal (기본값)</h3>
    <div class="normal">This is a    text with  irregular spacing. Here is a new line.</div>
    
    <h3>white-space: nowrap</h3>
    <div class="nowrap">This is a    text with  irregular spacing. Here is a new line.</div>
    
    <h3>white-space: pre</h3>
    <div class="pre">This is a    text with  irregular spacing. Here is a new line.</div>
    
    <h3>white-space: pre-line</h3>
    <div class="pre-line">This is a    text with  irregular spacing. Here is a new line.</div>
    
    <h3>white-space: pre-wrap</h3>
    <div class="pre-wrap">This is a    text with  irregular spacing. Here is a new line.</div>
</body>
</html>

5. 활용 사례 및 SEO 최적화

white-space 속성은 웹 페이지에서 텍스트 배치를 세밀하게 조정하고 레이아웃을 최적화하는 데 큰 도움이 된다.

블로그 포스트, 뉴스 기사 등에서 가독성을 높이고 사용자가 읽기 편한 레이아웃을 만들기 위해 적절히 활용할 수 있다. 텍스트의 가독성은 사용자 경험(UX)에 영향을 미치며, 이는 웹사이트의 SEO 최적화에도 긍정적인 역할을 한다.