1. white-space란?
white=흰 白, space=빌 空
→ 위 순서를 바꾸면 空白(공백)
→ 즉, 문자가 없는 흰 공간(빈 공간)을 말한다.
2. 컴퓨터에 white-space를 입력하는 방법 3가지
- 탭 키(혹은 스페이스 바) = 들여 쓰기.
- 스페이스 바 = 공백 입력.
- 엔터 키 = 줄 바꿈 입력.
3. 컴퓨터가 white space를 바라보는 시각
= 연속된 공백은 인정하지 않는다 = 즉, 공백 1개로 본다.
그러므로,
- 들여 쓰기(←탭키 또는 스페이스 바에 의한 연속 공백)는 인정하지 않고,
- 글자 사이 연속 공백(←스페이스 바에 의한)은 공백 1개로 처리하고,
- 라인 연속 공백(←엔터키, 줄 바꿈 여러 개), 이 세 가지 모두 인정하지 않는다.
→이것이 기본 값 = white-space: normal 값
4. white-space 속성 값 5가지
|
속성 값(value) |
탭, 스페이스바 연속 공백(글자 사이 공백) |
엔터키 연속 공백(line 공백) |
자동 줄 바꿈 |
|
|
1 |
normal |
× |
× |
○ |
|
2 |
nowrap |
× |
× |
× |
|
3 |
pre |
○ |
○ |
× |
|
4 |
pre-wrap |
○ |
○ |
○ |
|
5 |
pre-line |
× |
○ |
○ |
1) 정상=normal
위 3에서 기록되어 있듯이, 연속된 공백을 인정하지 않는 것이 지극히 정상적인 컴퓨터의 행동이다.
단, wrap(포장)은 해 주는 것이 요즘 서비스 세상의 기본이다.
(그러므로 탭, 스페이스 공백과, 엔터 공백은 인정해 주지 않되, 포장(줄 바꿈)만 해준다.
※ wrap(랩)이란 냉장고에 음식 포장하는 바로 그 랩이다.
음식을 감싸듯, 여기서는 흘러넘치는 문자를 브라우저 내부에 감싸는 것이다.
(랩=포장하다, 두르다, 감싸다의 뜻)
2) no+wrap= 포장을 안 하겠다는 뜻.
브라우저 창 밖으로 흘러넘치는 문자를 감싸 주지(포장해 주지) 않으므로
당연히 문자는 줄 바꿈 되지 않고, 우측으로 흘러 나갈 수밖에 없다.
위 1) normal과 nowrap의 차이는 wrap 문제, 딱 이거 1개이다(위 도표 확인)
3) pre란
몇 번째 앞 글에 정리했듯이 pre(미리)+ formatted(구조화된) 요소 그대로 인정해 주겠다는 태그(요소)이다.
그러므로, 탭 키, 스페이스 바, 엔터 키 모두 인정해 주는 것은 <pre>의 지극히 정상적인 행동이다.
그리고 엔터키를 치지 않은 긴 줄은 당연히 우측으로 흘러 빠지도록 해 주는 것이 미리 구조화된 형식을 100% 인정해 주는 것이 아니겠는가?
그러므로, pre 속성 값은 긴 줄(엔터 키로 줄 바꿈 하지 않은 문단)의 자동 줄 바꿈이 안 되는 것이다.
4) pre-wrap이란
그러나, 줄 바꿈이 안 되는 것은 pre 사용에 있어 엄청 큰 불편이며 유일한 불편.
pre의 민족들이 우리도 포장해 달라고 끊임없이 청원했다.
그래서 pre의 혈족이지만, 자동 줄 바꿈(감싸기) 해 주기로 한 것이 pre-wrap이다.
5) pre-line이란
위 4) pre-wrap에서 line(엔터키 연속 부분) 공백만 인정해 주는 것이다.
그러므로, 탭 키 및 스페이스 바 공백(글자 간 연속 공백)은 인정해 주지 않는 것이다.
※ white-space:initial;
= 기본값(default 값)으로 설정하겠다는 것
(initial은 Internet Explorer 11, 그 이전 버전, Opera 15, 그 이전 버전에서 지원 안 됨)
※ white-space:inherit;
= 상위 요소에서 상속하겠다는 것.
5. 브라우저 창 출력
1) normal
위 그림을 보면, 자간(글자 간) 공백 불인정, 행간 공백 불인정,
오직 Wrap(감싸기)만 서비스로 해 준다.
2) nowrap
위 그림을 보면, 자간 공백 불인정, 행간 공백 불인정,
Wrap(감싸기)도 안 하겠다고 no-wrap, 이렇게 분명히 적혀 있다.
3) pre
위 그림을 보면, 자간 공백 인정, 행간 공백 인정,
감싸기 불인정= Pre 속성 100% 인정해 준 것이다.
4) pre-wrap
위 그림을 보면, pre이지만
오직 Wrap(감싸기)만 서비스로 해 달라고, pre이지만 wrap 해 주세요, 이렇게 적혀 있다.
5) pre-line
위 그림을 보면, pre이면서 감싸기(wrap)까지 해 달라고 했으니,
line만 인정해 주세요(자간 공백은 양보합니다)=이렇게 적혀 있다.
6. HTML 입력 내용
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>white-space란</title>
<style>
div {
width: 250px;
border: 3px solid red;
height: auto;
padding: 10px;
margin: 10px;
}
.normal {
white-space: normal;
background: Tomato;
}
.nowrap {
white-space: nowrap;
background: DodgerBlue;
}
.pre {
white-space: pre;
background: MediumSeaGreen;
}
.pre-wrap {
white-space: pre-wrap;
background: Violet;
}
.pre-line {
white-space: pre-line;
background: gray;
}
</style>
</head>
<body>
<div class="normal">
white space란 무엇인가?
white=흰 白, space=빌 空
→ 위 白空의 순서를 바꾸면 空白(공백)
→ 즉, 문자가 없는 흰 공간(빈 공간)을 말한다.
</div>
<div class="nowrap">
white space란 무엇인가?
white=흰 白, space=빌 空
→ 위 白空의 순서를 바꾸면 空白(공백)
→ 즉, 문자가 없는 흰 공간(빈 공간)을 말한다.
</div>
<div class="pre">
white space란 무엇인가?
white=흰 白, space=빌 空
→ 위 白空의 순서를 바꾸면 空白(공백)
→ 즉, 문자가 없는 흰 공간(빈 공간)을 말한다.
</div>
<div class="pre-wrap">
white space란 무엇인가?
white=흰 白, space=빌 空
→ 위 白空의 순서를 바꾸면 空白(공백)
→ 즉, 문자가 없는 흰 공간(빈 공간)을 말한다.
</div>
<div class="pre-line">
white space란 무엇인가?
white=흰 白, space=빌 空
→ 위 白空의 순서를 바꾸면 空白(공백)
→ 즉, 문자가 없는 흰 공간(빈 공간)을 말한다.
</div>
</body>
</html>
7. 브라우저 창 전체 출력 모습
'코딩 > CSS' 카테고리의 다른 글
| css 박스모델1 - margin, padding, border, content (0) | 2021.12.07 |
|---|---|
| css 포지션 - static, fixed, sticky 차이점 (0) | 2021.12.06 |
| CSS position, relative 와 absolute 차이 (0) | 2021.12.05 |
| 픽셀 em 차이, 변환 계산법 (0) | 2021.10.20 |
| 오버플로와 텍스트 오버플로(overflow / text-overflow) (0) | 2021.04.24 |