이번 글에서는 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지에 대한 속성인 white-space
속성값에 대해 다뤄보는 시간을 갖도록 하겠습니다.
- white space란?
/*문법*/
white-space: normal | nowrap | pre | pre-wrap | pre-line
| 속성값 | 스페이스, 탭 | 줄바꿈 | 자동 줄바꿈 |
| normal | 병합 | 병합 | O |
| nowrap | 병합 | 병합 | X |
| pre | 보존 | 보존 | X |
| pre-wrap | 보존 | 보존 | O |
| pre-line | 병합 | 보존 | O |
1. 스페이스, 탭
연속되는 스페이스와 탭에 대한 처리 방법으로, 병합은 1개의 공백으로 바꾸고 보존은 입력된 그대로
출력하게 됩니다.
2. 줄바꿈
줄바꿈의 처리 방법으로, 병합은 1개의 공백으로 바꾸고 보존은 입력된 그대로 출력합니다.
3. 자동 줄바꿈
내용이 영역의 크기를 벗어날 때 처리 방법으로, O은 자동으로 줄바꿈하여 영역을 벗어나지 않게 하고
X는 영역을 벗어나도 입력된 그대로 출력하는 것입니다.
개념은 이 정도로 기억해 두고, 이 개념을 잘 보시고 예제 코드의 결과창을 보면서 이해하시면 좀 더 와닿을
것입니다.
- 예제 코드
영역을 벗어나는 긴 문장을 쓰고, 각각 white-space값을 다르게 줘서 어떻게 처리가 되는지 한 번
보겠습니다.
(긴 문장은 w3school의 html 소개 문장을 가져왔습니다.)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
font-size: 16px;
width: 500px;
border: 1px solid black;
}
.title {
font-size: 20px;
font-weight: bold;
}
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.prewrap {
white-space: pre-wrap;
}
.preline {
white-space: pre-line;
}
</style>
</head>
<body>
<div class="title">
white-space: normal
</div>
<div class="normal"> HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!
</div>
<div class="title">
white-space: nowrap
</div>
<div class="nowrap"> HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!
</div>
<div class="title">
white-space: pre
</div>
<div class="pre"> HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!
</div>
<div class="title">
white-space: pre-wrap
</div>
<div class="prewrap"> HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!
</div>
<div class="title">
white-space: pre-line
</div>
<div class="preline"> HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples.
With our online "Try it Yourself" editor, you can edit and test each example yourself!
</div>
</body>
</html>
위의 각 속성값의 특징들과 결과창의 특징들을 비교하면 더 이해가 쉬울 것입니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| html form 태그 (0) | 2021.12.27 |
|---|---|
| css text-overflow 속성 (0) | 2021.12.27 |
| css border-radius 속성 (0) | 2021.12.26 |
| css text-indent 속성 (0) | 2021.12.26 |
| css text-align 속성 (0) | 2021.12.23 |
댓글