티스토리 뷰

[개발]프로그래밍/css3

[css3] white-space - 공백 처리

좋은 블로그 2021. 4. 1. 11:02
1. 개념
white-space - 공백 처리
white-space는 텍스트 안에 있는 공백을 어떻게 처리할 것인지에 대해 정해 주는 속성

속성

설명

normal

여러 개의 공백을 하나로 표시(기본값)

nowrap

여러 개의 공백을 하나로 표시
영역 너비를 넘어가는 내용은 계속 한 줄로 표시

pre

여러 개의 공백을 그대로 표시
영역 너비를 넘어가는 내용은 계속 한 줄로 표시

pre-line

여러 개의 공백을 하나로 표시
영역이 넘어가는 내용은 줄 바꿔 표시

pre-wrap

여러 개의 공백을 그대로 표시
영역이 넘어가는 내용은 줄 바꿔 표시
2. 태그
white-space
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
width : 200px ;
border : 1px solid #000 ;
}
</style>
</head>
<body>
1
<div style =' white-space : normal ;' >
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
2
<div style =' white-space : nowrap ;' >
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
3
<div style =' white-space : pre ;' >
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
4
<div style =' white-space : pre-line ;' >
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
5
<div style =' white-space : pre-wrap ;' >
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
</body>
</html>
결과 화면
코드 설명
1
white-space : normal ;
가장 기본 값인 normal을 이용하는 경우에는 여러 개의 공백을 하나로 표시합니다.
위에서 보시면 '키보드와' 하고 '하루' 사이에 공백이 많습니다.
그러한 공백을 하나로 보기 때문에 1번에서의 결과가 나오게 됩니다.
2
white-space : nowrap ;
nowrap은 normal 처럼 여러개의 공백을 하나로 보는데 영역의 너비를 넘어가는 경우에 차이가 있습니다.
normal의 경우에는 자동으로 줄 바꿈이 되어서 나오지만 nowrap은 줄 바꿈이 되지 않고 계속 한 줄로 표시하고 있음을 알 수 있습니다.
맨 앞에 있는 탭으로 공백이 들어간 경우에는 따로 표시되지 않음을 알 수 있습니다.
3
white-space : pre ;
pre는 여러개의 공백을 그대로 표시하고 있고 영역의 너비가 넓어가는 경우에도 줄 바꿈을 하지 않고 한 줄로 표시하고 있습니다.
맨 앞에 있는 공백은 탭이 입력된 공백인데 그대로 표시되는 것을 확인하실 수 있습니다.
4
white-space : pre-line ;
pre-line은 여러 개의 공백을 하나로 표시하고 맨 처음에 있는 '키보드와' 앞에는 탭으로 작성을 하였습니다.
normal의 경우에는 탭을 표시하지 않았지만 pre-line은 탭으로 입력한 공백을 그대로 표시하고 있음을 알 수 있습니다.
영역의 너비를 넘어갈 경우에는 자동으로 줄 바꿈을 해줍니다.
5
white-space : pre-wrap ;
pre-wrap은 여러 개의 공백을 그대로 표시하고 맨 처음에 있는 '키보드와' 앞에는 탭도 그대로 표시하고 있습니다.
그리고 영역의 너비를 넘어갈 경우에는 자동 줄 바꿔주기 때문에 5번과 같은 결과가 나오는 것을 확인하실 수 있습니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] text-align - 텍스트 정렬  (0) 2021.04.05
[css3] letter-spacing,word-spacing - 텍스트 간격 조절  (0) 2021.04.02
[css3] text-shadow - 텍스트에 그림자 효과  (0) 2021.03.31
[css3] text-transform - 텍스트 대·소문자 변환  (0) 2021.03.30
[css3] text-decoration - 텍스트에 줄 표시  (0) 2021.03.29
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday