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 / background-clip

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / word-wrap

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

CSS / Reference / list-style-position

list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / text-align

text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / list-style-type

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

CSS / Reference / border-spacing

border-spacing은 표의 테두리와 셀의 테두리 사이의 간격을 정하는 속성입니다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 border-spacing은 border-collapse의 값이 separate일 때만 적용됩니다.

CSS / Reference / font-weight

font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / font-variant

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

CSS / Reference / background-image

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

CSS / Reference / background-position

background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1