CSS / Reference / white-space
개요
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 : 부모 요소의 속성값을 상속받습니다.
| 스페이스와 탭1 | 줄바꿈2 | 자동 줄바꿈3 | |
|---|---|---|---|
| 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>
line-height 속성은 텍스트 줄 간격(줄 높이)을 조절하는 데 사용됩니다. 텍스트의 가독성을 높이고, 디자인적으로 더 일관된 레이아웃을 만들기 위해 자주 사용됩니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2
CSS / Reference / background-position
background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1
들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다.
CSS / Reference / align-content
flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다.
CSS / Reference / border-spacing
border-spacing은 표의 테두리와 셀의 테두리 사이의 간격을 정하는 속성입니다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 border-spacing은 border-collapse의 값이 separate일 때만 적용됩니다.
font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
CSS / Reference / caption-side
caption-side는 표(table)의 caption 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2