white-space
white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.
white-space
white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.
정의(Definition)
- white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.
- pre속성과 pre태그는 마크업을 그대로 보여주는 속성을 갖고 있습니다. pre 태그를 많이 사용하기 때문에 CSS 속성은 잘 사용하지 않습니다.
- 기본적으로 마크업을 하고 화면에 출력하면, 마크업에서 공백 한 칸은 화면에서 한 칸으로 인식합니다. 두 칸, 세 칸도 공백 한 칸으로 인식합니다. 한 줄은 한 줄 조차 인식할 수 없습니다. 이런 공백과 줄을 인식시켜주는 속성이 pre, pre-wrap, pre-line 속성입니다.
- 공백과 줄을 인식한다는 것은 마크업에서 두 칸, 세칸, 두 줄 등을 표시하면, 화면에서도 그대로 출력된다는 것을 의미합니다.
문법(Syntax)
white-space : normal | nowrap | pre | pre-line | pre-wrap
속성(Property)
속성값 |
설명 |
normal |
white-space 속성의 기본 값입니다. |
nowrap |
줄바꿈을 하지 않습니다. |
pre |
마크업 공백과 동일하게 보여줍니다. 줄바꿈을 하지 않습니다. 공백 한 칸 이상을 인식합니다. |
pre-line |
마크업 공백과 동일하게 보여줍니다. 줄바꿈을 합니다. 공백 한 칸 이상을 인식하지 못합니다. |
pre-wrap |
마크업 공백과 동일하게 보여줍니다. 줄바꿈을 합니다. 공백 한 칸 이상을 인식합니다. |
inherit |
white-space의 속성 값을 상위요소한테 상속받습니다. |
속성 |
줄바꿈 |
공백 |
줄 |
normal |
줄바꿈을 합니다. |
공백 인식 못합니다. |
줄 인식 못합니다 |
nowrap |
줄바꿈을 하지 않습니다. |
공백 인식 못합니다. |
줄 인식 못합니다 |
pre |
줄바꿈을 하지 않습니다. |
공백 인식합니다. |
줄 인식합니다 |
pre-line |
줄바꿈을 합니다. |
공백 인식 못합니다. |
줄 인식합니다 |
pre-wrap |
줄바꿈을 합니다. |
공백 인식합니다. |
줄 인식합니다 |
|
![크롬 브라우저 크롬 아이콘](https://tistory1.daumcdn.net/tistory/2933724/skin/images/icon-chrome1.png) |
![파이어폭스 브라우저 파이어폭스 아이콘](https://tistory3.daumcdn.net/tistory/2933724/skin/images/icon-firefox1.png) |
![사파리 브라우저 사파리 아이콘](https://tistory1.daumcdn.net/tistory/2933724/skin/images/icon-safari1.png) |
![오페라 브라우저 오페라 아이콘](https://tistory3.daumcdn.net/tistory/2933724/skin/images/icon-opera1.png) |
![네이버 웨일 브라우저 네이버 웨일](https://tistory1.daumcdn.net/tistory/2933724/skin/images/icon-whale1.png) |
6 |
7 |
8 |
9 |
10 |
11 |
![엣지 브라우저 엣지 아이콘](https://tistory1.daumcdn.net/tistory/2933724/skin/images/icon-edge.png) |
![모바일 안드로이드 브라우저 안드로이드 아이콘](https://tistory2.daumcdn.net/tistory/2933724/skin/images/icon-android.png) |
![모바일 아이폰 브라우저 ios 아이콘](https://tistory2.daumcdn.net/tistory/2933724/skin/images/icon-ios.png) |
white-space |
사용가능 |
사용가능 |
사용가능 |
사용가능 |
사용가능 |
사용안됨 |
사용안됨 |
사용가능 |
사용가능 |
사용가능 |
사용가능 |
사용가능 |
사용가능 |
사용가능 |