코딩/CSS

white space 와 空(space)白(white)

moodyblues 2021. 4. 21. 23:15

1. white-space란?

 

white=흰 白, space=빌 空

→ 위 순서를 바꾸면 空白(공백)

→ 즉, 문자가 없는 흰 공간(빈 공간)을 말한다.

 

2. 컴퓨터에 white-space를 입력하는 방법 3가지

  1. 탭 키(혹은 스페이스 바) = 들여 쓰기.
  2. 스페이스 바 = 공백 입력.
  3. 엔터 키 = 줄 바꿈 입력.

3. 컴퓨터가 white space를 바라보는 시각

= 연속된 공백은 인정하지 않는다 = 즉, 공백 1개로 본다.

 

그러므로,

  1. 들여 쓰기(←탭키 또는 스페이스 바에 의한 연속 공백)는 인정하지 않고, 
  2. 글자 사이 연속 공백(←스페이스 바에 의한)은 공백 1개로 처리하고,
  3. 라인 연속 공백(←엔터키, 줄 바꿈 여러 개), 이 세 가지 모두 인정하지 않는다.

→이것이 기본 값 = 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

 

 

white-space normal, 브라우저 창 출력 모습

위 그림을 보면, 자간(글자 간) 공백 불인정, 행간 공백 불인정, 

오직 Wrap(감싸기)만 서비스로 해 준다.

 

2) nowrap

 

 

white-space nowrap, 브라우저 창 출력 모습

위 그림을 보면, 자간 공백 불인정, 행간 공백 불인정,

Wrap(감싸기)도 안 하겠다고 no-wrap, 이렇게 분명히 적혀 있다.

3) pre

 

 

white-space pre, 브라우저 창 출력 모습

위 그림을 보면, 자간 공백 인정, 행간 공백 인정,

감싸기 불인정= Pre 속성 100% 인정해 준 것이다.

 

 

4) pre-wrap

 

 

white-space pre-wrap, 브라우저 창 출력 모습

위 그림을 보면, pre이지만

오직 Wrap(감싸기)만 서비스로 해 달라고, pre이지만 wrap 해 주세요, 이렇게 적혀 있다.

 

5) pre-line

 

 

white-space 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. 브라우저 창 전체 출력 모습

 

white-space 속성별, 브라우저 창 전체 출력 모습/ 위에서 순서대로, 1) normal, 2) nowrap, 3) pre, 4) pre-wrap, 5) pre-line

저작자표시 비영리 변경금지

'코딩 > 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

'코딩/CSS'의 다른글

  • 현재글white space 와 空(space)白(white)

관련글

댓글

티스토리툴바