white-space

1 개요
2 문법
3 예제

개요

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다.

기본값 : normal
상속 : Yes
애니메이션 : No
버전 : CSS Level 1

문법

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

normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

	스페이스와 탭¹	줄바꿈²	자동 줄바꿈³
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
줄바꿈의 처리방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
내용이 영역의 크기를 벗어날 때 처리방법입니다. O는 자동으로 줄바꿈하여 영역 내에 내용을 표시하는 것이고, X는 영역을 벗어나더라도 입력된 대로 출력하는 것입니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: Consolas;
        font-size: 16px;
      }
      .t {
        font-weight: bold;
        color: #009688;
      }
      .a {
        white-space: normal;
      }
      .b {
        white-space: nowrap;
      }
      .c {
        white-space: pre;
      }
      .d {
        white-space: pre-wrap;
      }
      .e {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <p class="t">white-space: normal;</p>
    <p class="a">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: nowrap;</p>
    <p class="b">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre;</p>
    <p class="c">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre-wrap;</p>
    <p class="d">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre-line;</p>
    <p class="e">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
  </body>
</html>

CSS / Reference / font-variant

font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / font-family

font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / word-wrap

word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / border-width

border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width

CSS / Reference / clip

clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2

CSS / Reference / background-attachment

background-attachment는 배경 이미지의 스크롤 여부를 정하는 속성입니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / background-image

background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / tab-size

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 이 탭 크기를 조정하는 속성이 tab-size입니다.

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / line-height

line-height 속성은 텍스트 줄 간격(줄 높이)을 조절하는 데 사용됩니다. 텍스트의 가독성을 높이고, 디자인적으로 더 일관된 레이아웃을 만들기 위해 자주 사용됩니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1