티스토리 뷰

Coding/CSS

white-space

jeongah story 2018. 12. 4. 17:32

white-space

줄바꿈, 공백, 줄 속성을 설정합니다.

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

속성(Property)

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









Image 출처 : https://cdn.dribbble.com/users/103909/screenshots/2836495/exbp-4_copy.png


'Coding > CSS' 카테고리의 다른 글

이미지 타입 선택  (0) 2018.12.05
background  (0) 2018.12.05
overflow  (0) 2018.12.05
text (align, transform, decoration)  (0) 2018.12.05
CSS 선택자  (0) 2018.11.21
댓글
© 2018 eh2world