[HTML/CSS] 공백과 줄바꿈 지정하기(white-space)

white-space란 HTML 요소 내에서 빈칸, 탭, 개행 등을 일컫는 용어입니다. 즉, 공백이나 개행 문자 등을 말합니다.

이 공백이나 개행 문자는 웹 페이지나 문서의 레이아웃을 지정할 때 중요한 역할을 합니다. 이번 포스팅에서는 white-space의 여러 속성과 사용 방법에 대해 알아보겠습니다.

 

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

• normal: 여러 개의 공백이나 개행 문자를 하나로 합칩니다. (기본 값)
• nowrap: 공백이나 개행 문자를 무시합니다.
• pre: 원본 텍스트 그대로 표시합니다.
• pre-wrap: 원본 텍스트 그대로 표시하지만, 줄 바꿈을 인식합니다.
• pre-line: 줄 바꿈 문자를 기준으로 줄을 나눕니다.

 

normal(가로의 오른쪽 끝에 닿으면 자동으로 줄 바꿈 합니다.)

See the Pen white-space1 by wjdxo513 (@wjdxo513) on CodePen.

 

 

nowrap(줄 바꿈을 하지 않고 박스 벗어나 표시됩니다.)

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

 

pre(원본 텍스트 그대로 표시합니다.)

See the Pen white-space3 by wjdxo513 (@wjdxo513) on CodePen.

 

 

pre-wrap(원본 텍스트를 표시하되 줄 바꿈 합니다.)

pre-line(줄 바꿈

 

 

문자를 기준으로 줄을 나눕니다.)

See the Pen white-space5 by wjdxo513 (@wjdxo513) on CodePen.

 

 

※ white-space는 주로 다음과 같은 상황에서 사용됩니다.

• 텍스트 줄바꿈: white-space의 속성을 이용하여 줄 바꿈을 조절할 수 있습니다. pre, pre-wrap, pre-line 속성을 사용하면 줄 바꿈을 인식하여 출력할 수 있습니다.
• 텍스트 들여쓰기: 공백이나 탭을 이용하여 들여쓰기를 지정할 수 있습니다. white-space의 속성을 이용하여 공백을 무시하거나 합치는 등의 방법으로 들여쓰기를 지정할 수 있습니다.
• 리스트 표시: white-space의 속성을 이용하여 리스트에서의 들여쓰기와 개행 문자를 지정할 수 있습니다.