공백과 줄바꿈 지정하기(white-space)

공백과 줄바꿈 지정하기 (white-space)

웹 문서에서 공백과 줄바꿈은 텍스트의 가독성을 떨어뜨리거나 특정한 형태로 표현하기 위해 사용됩니다. 이 포스팅에서는 공백과 줄바꿈을 CSS의 white-space 속성을 사용하여 지정하는 방법에 대해 알아보겠습니다.

white-space 속성이란?

white-space 속성은 텍스트의 공백과 줄바꿈의 처리 방식을 지정하는 데 사용됩니다. 기본값은 normal이며, 텍스트 줄의 양쪽에 있는 공백은 한 개 이상의 공백으로 처리되고 줄바꿈은 무시됩니다.

white-space 속성의 값

white-space 속성은 다음과 같은 값들을 가질 수 있습니다:

• normal: 기본값으로, 텍스트 줄의 양쪽에 있는 공백은 한 개 이상의 공백으로 처리되며 줄바꿈은 무시됩니다.
• nowrap: 줄바꿈을 허용하지 않고, 공백도 한 개 이상의 공백으로 처리됩니다.
• pre: HTML 소스 코드에 있는 공백과 줄바꿈을 그대로 표현합니다.
• pre-line: 텍스트 줄의 양쪽에 있는 공백은 한 개 이상의 공백으로 처리되고, 줄바꿈은 웹 브라우저가 자동으로 추가됩니다.
• pre-wrap: HTML 소스 코드에 있는 공백은 그대로 표현되며, 줄바꿈은 웹 브라우저가 자동으로 추가됩니다.

white-space 속성 사용 예제

p {
  white-space: nowrap;
}

pre {
  white-space: pre;
}

span {
  white-space: pre-line;
}

위 예제에서는 p 요소의 텍스트는 줄바꿈을 허용하지 않고, 공백은 한 개 이상의 공백으로 처리됩니다. pre 요소는 HTML 소스 코드에 있는 공백과 줄바꿈을 그대로 표현합니다. 마지막으로 span 요소는 텍스트 줄의 양쪽에 있는 공백은 한 개 이상의 공백으로 처리되고, 줄바꿈은 웹 브라우저가 자동으로 추가됩니다.

마무리

white-space 속성은 텍스트의 공백과 줄바꿈을 지정하는 데 사용됩니다. 다양한 값들을 이용하여 텍스트의 가독성을 높일 수 있으며, 웹 문서의 특정한 형태를 표현할 때 유용하게 사용할 수 있습니다.