CSS의 white-space 속성 사용법

많은 웹 개발자분들이 HTML 문서 내에서는 띄어쓰기를 여러 번 하더라도 한 번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한번 쯤은 경험하셨을텐데요. 사실 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 쉽게 변경할 수가 있다는 사실을 알고 계셨나요?

공백 문자

우선 HTML에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기(\s), 들여쓰기(\t), 줄바꿈(\n)이 대표적으로 공백을 나타내는 문자지요?

이러한 문자들을 아무리 연속해서 많이 사용하더라도 웹에서는 다음과 같이 그냥 하나의 띄어쓰기로 처리가 되는 경우가 많습니다. 게다가 이러한 공백 문자가 HTML 요소 내에서 맨 앞이나 맨 뒤에 나오면 아예 없는 셈칙도 하지요.

normal

위와 같은 현상이 발생하는 이유는 white-space 속성은 별도로 지정해주지 않으면 기본적으로 normal이 적용이되기 때문인데요. white-space 속성이 normal로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시가 됩니다.

뿐만 아니라 normal 속성값은 텍스트가 너무 길어서 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈을 해주는데요. 이렇게 줄바꿈은 자동으로만 일어나며 줄바꿈 문자를 이용해서 원하는 위치에서 수동으로 줄바꿈을 할 수 있는 방법은 없습니다. 또한 ( 와 같은 HTML 엔티티(entity)를 쓰는 편법을 동원하지 않는 이상) 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능합니다.

HTML에서  가 왜 필요하고 언제 사용해야 되는지에 대해서 별도 포스팅에서 다루었우니 참고 바랍니다.

nowrap

텍스트가 길어서 부모 요소 안의 가로폭을 넘어가더라도 자동으로 줄바꿈이 일어나게 하고 싶지 않은 경우가 있는데요. 이럴 때는 white-space 속성을 nowrap으로 설정해주면 됩니다.

자동 줄바꿈이 일어나지 않는다는 부분을 제외하고는 nowrap 설정값은 기본 설정값인 normal과 동일하게 작동하는데요. 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자를 모두 무시하고 띄어쓰기 한 번으로 처리합니다.

대부분 경우에는 overflow 속성을 hidden으로 설정하여 부모 요소 밖으로 빠져나오는 텍스트를 숨기는데요. 사용자가 혼란스럽지 않도록 text-overflow 속성을 사용하여 말줌임 기호인 ...를 보여주는 경우도 많습니다.

div:nth-of-type(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

또 다른 대안으로 사용자가 가로 스크롤바로 끝까지 텍스트를 볼 수 있도록 해줄 수도 있겠습니다.

div:nth-of-type(4) {
  white-space: nowrap;
  overflow: auto;
}

CSS의 overflow 속성에 대한 자세한 내용은 관련 포스팅을 참고 바랍니다.

pre

텍스트에 포함된 연속된 띄어쓰기, 들여쓰기, 줄바꿈과 같은 공백 문자들이 HTML 문서 안에 붙여넣은 그대로 나타나게 하고 싶다면 white-space 속성을 pre로 설정하면 되는데요. 보통 웹페이지 상에서 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용합니다.

pre 설정값은 마치 HTML의 <pre> 요소를 사용하는 것처럼 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지됩니다. 그래서 다음과 같이 자바스크립트 코드를 웹에서도 효과적으로 보여줄 수 있습니다.

단, 텍스트 안에 긴 행이 있다면 nowrap 설정값처럼 해당 행은 부모 요소 밖으로 빠져나오게 되오니 주의가 필요한데요. 이를 방지하기 위해서 overflow 속성을 auto로 설정하여 좌우 방향으로 스크롤바가 자동으로 나타나게 해주면 좋습니다.

div:nth-of-type(2) {
  white-space: pre;
  overflow: auto;
}

pre-wrap

pre-wrap 속성값은 pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존해주는데요. 유일한 차이점은 텍스트 안에 긴 행이 있을 때 해당 행에서 자동으로 줄바꿈이 일어납니다.

따라서 좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있다는 이점이 있습니다.

pre-line

pre-line 속성값은 말 그대로 라인(line), 즉 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리합니다. 또한 pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않습니다.

다시 말해서, pre-line 속성값은 줄바꿈만 그대로 유지하면서 연속된 띄어쓰기와 들여쓰기를 무시하고 싶을 때 쓸 수 있는데요. 활용 사례가 그리 많지는 않은 것 같습니다.

break-spaces

마지막으로 break-spaces 속성값은 pre-wrap이랑 거의 비슷하면서도 미묘하게 다르게 동작하는데요. 실제 프로젝트에서 쓰이는 경우를 거의 못 봤기 때문에 본 포스팅에서는 자세히 다루지 않도록 하겠습니다.

이 속성값에 대해서 공부가 필요하신 분들은 MDN 공식 문서를 읽어 보시기를 추천드립니다.

전체 코드

아래에 white-space 속성값을 다양하게 적용하여 CSS 코드를 한번 스타일해보았습니다. 모든 속성값이 어떻게 동작한느지 한 눈에 비교해보면 좀 더 도움이 되실 것 같습니다 😄

마치면서

이상으로 CSS의 white-space 속성을 사용하여 HTML 요소 내의 공백을 어떻게 처리하는지에 대해서 살펴보았습니다. 이 속성을 적절히 활용하셔서 텍스트 내에서 일어나는 띄어쓰기, 들여쓰기, 줄바꿈을 자유자재로 다루실 수 있으셨으면 좋겠습니다.

그 밖에 CSS에서 텍스트 스타일을 할 때 많이 쓰이는 속성에 대해서는 별도의 포스팅에 정리를 해놨으니 참고 바랍니다.