CSS white-space 속성 적재적소에 활용하기!

웹 개발하면서 white-space 속성은 신경쓰지 않으면 놓치기 쉬운 부분인 것 같다. 계속 필요할 때마다 찾아 봤었는데 머리 속에서 제대로 정리되지 않아서 계속 찾아보게 되는 거 같아 이번에 좀 정리해보려고 한다. 결국엔 각 속성이 어떤 역할을 하고 어떤 상황에서 써야 할지 정리해두는 게 좋을 것 같다.

white-space 속성이란?

white-space 속성은 텍스트의 공백 처리 방법을 지정하는 CSS 속성이다. 이 속성은 요소 안에 있는 공백 문자와 줄바꿈 문자를 어떻게 처리할지를 정한다. 브라우저는 이 설정에 따라 텍스트의 줄바꿈, 공백 축소, 자동 줄바꿈 여부 등을 결정한다. 기본 값은 normal이다.

.element {
  white-space: normal;
}

white-space의 다양한 값

pre

• 소스 코드에 쓴 그대로 모든 공백과 줄바꿈을 그대로 보여준다. 자동 줄바꿈은 발생하지 않아서 너비를 넘으면 스크롤이 생길 수 있다.
• 사용 예: 코드 스니펫이나 시, 혹은 서식이 중요한 텍스트에 좋다.

nowrap

• 연속된 공백은 축소되지만 텍스트는 한 줄로 유지된다. 줄바꿈이 없어서 긴 텍스트가 한 줄로 쭉 이어진다.
• 사용 예: 메뉴, 버튼처럼 텍스트가 한 줄에 유지되어야 하는 경우에 적합하다.

pre-wrap

• 사용자가 입력한 모든 줄바꿈과 연속 공백을 그대로 유지하면서, 요소 너비를 넘어가는 경우 자동 줄바꿈도 적용된다.
• 사용 예: 포럼 게시글이나 채팅 메시지처럼 사용자가 입력한 텍스트 포맷(줄바꿈, 들여쓰기 등)을 그대로 보여줘야 할 때 좋다. 코드나 시처럼 정밀한 포맷이 필요한 경우에 유용하다.

pre-line

• 사용자가 입력한 줄바꿈은 유지하면서 연속된 공백은 하나로 축소하고, 자동 줄바꿈도 적용된다.
• 사용 예: 댓글이나 사용자 리뷰처럼, 사용자가 의도한 줄바꿈은 살리면서 불필요한 공백을 줄여 깔끔한 레이아웃을 유지하고 싶을 때 좋다.

white-space 속성 요약

• normal

  • 공백 처리: 연속 공백 축소
  • 줄바꿈 처리: HTML 태그 및 기본 규칙에 따름
  • 자동 줄바꿈: 요소 너비에 따라 wrap
  • 사용 예: 일반 텍스트 콘텐츠 (기본 설정)

• pre

  • 공백 처리: 입력한 공백 그대로 유지
  • 줄바꿈 처리: 소스 코드상의 줄바꿈 그대로 적용
  • 자동 줄바꿈: 지원하지 않음 (오버플로우 시 스크롤 발생)
  • 사용 예: 코드 스니펫, 시 또는 포맷이 중요한 텍스트

• nowrap

  • 공백 처리: 연속 공백 축소
  • 줄바꿈 처리: 모든 줄바꿈 무시
  • 자동 줄바꿈: 지원하지 않음 (한 줄로 표시)
  • 사용 예: 메뉴, 버튼 등 한 줄로 유지해야 하는 경우

• pre-wrap

  • 공백 처리: 입력한 공백 그대로 유지
  • 줄바꿈 처리: 소스 상의 줄바꿈 그대로 적용
  • 자동 줄바꿈: 지원 (요소 범위 내 자동 wrap)
  • 사용 예: 사용자가 입력한 텍스트의 형식을 유지할 때

• pre-line

  • 공백 처리: 연속 공백 축소
  • 줄바꿈 처리: 입력한 줄바꿈은 유지하지만 불필요한 공백은 축소
  • 자동 줄바꿈: 지원
  • 사용 예: 불필요한 공백은 제거하면서 필수 줄바꿈만 유지할 때

다양한 상황에서 테스트 해보기

CSS white-space를 완벽히 내 것으로 만들었나요?

이제 배운 내용을 실전에서 확인할 시간이에요!

Ducklog 🐥에서 각 white-space 옵션의 특성과 사용하면 좋을 상황들을 쭉 적어보고 확인해보세요!