white-space

white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.

Summary

특징	설명
기본 값	normal
상속	가능
애니메이션	안됨
버전	CSS1

Definition

• white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.
• pre속성과 pre태그는 마크업을 그대로 보여주는 속성을 갖고 있습니다. pre 태그를 많이 사용하기 때문에 CSS 속성은 잘 사용하지 않습니다.
• 기본적으로 마크업을 하고 화면에 출력하면, 마크업에서 공백 한 칸은 화면에서 한 칸으로 인식합니다. 두 칸, 세 칸도 공백 한 칸으로 인식합니다. 한 줄은 한 줄 조차 인식할 수 없습니다. 이런 공백과 줄을 인식시켜주는 속성이 pre, pre-wrap, pre-line 속성입니다.
• 공백과 줄을 인식한다는 것은 마크업에서 두 칸, 세칸, 두 줄 등을 표시하면, 화면에서도 그대로 출력된다는 것을 의미합니다.

Syntax

white-space : normal | nowrap | pre | pre-line | pre-wrap | inherit;

Property

속성 값	설명
normal	white-space 속성의 기본 값입니다.
nowrap	줄바꿈을 하지 않습니다.
pre	마크업 공백과 동일하게 보여줍니다. 줄바꿈을 하지 않습니다. 공백 한 칸 이상을 인식합니다.
pre-line	마크업 공백과 동일하게 보여줍니다. 줄바꿈을 합니다. 공백 한 칸 이상을 인식하지 못합니다.
pre-wrap	마크업 공백과 동일하게 보여줍니다. 줄바꿈을 합니다. 공백 한 칸 이상을 인식합니다.
inherit	white-space의 속성 값을 상위요소한테 상속받습니다.

속성	줄바꿈	공백	줄
normal	줄바꿈을 합니다.	공백 인식 못합니다.	줄 인식 못합니다
nowrap	줄바꿈을 하지 않습니다.	공백 인식 못합니다.	줄 인식 못합니다
pre	줄바꿈을 하지 않습니다.	공백 인식합니다.	줄 인식합니다
pre-line	줄바꿈을 합니다.	공백 인식 못합니다.	줄 인식합니다
pre-wrap	줄바꿈을 합니다.	공백 인식합니다.	줄 인식합니다

Compatibility

							6	7	8	9	10	11
white-space

Sample

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

그리드 시스템은 디자인 결과를 보장하는 것이 아니라, 각기 다른 디자이너들이 자신만의 개성 있는 스타일에 적합한 해결책을 찾을 수 있도록 객관적인 방법을 제공합니다. 그리드 시스템을 활용하려면, 그리드를 사용하는 방법을 배우려고 노력해야 합니다. 그리드 연습이 필요한 예술이기 때문입니다.

white-space : normal;
white-space : nowrap;
white-space : pre;
white-space : pre-line;
white-space : pre-wrap