white-space 속성(pre, pre-wrap, pre-line 차이)

 

white-space 속성(pre, pre-wrap, pre-line 차이)

 

 

오늘은 요소 안에  공백 처리를 어떻게 할지 지정하는 속성입니다.

 

white space란 여백이라고도 하는데 html에서는 공백, 공란으로 이해하면 됩니다.

 

 

 

▶태그 작성 시 공백은 어떻게 만들어질까요?

 

공백은,  줄바꿈(line break), 들여쓰기(tab), 공백(space) 등으로 만들어집니다.

 

아래와 같은 코드를 작성한다고 하면(검은색 글씨)

 

 

 

빨간색으로 표시한 부분으로 공백이 만들어 집니다.

 

tab키는 들여쓰기, space키는 공백, enter키는 줄바꿈

 

 

 

 

html 코드 작성시 공백은 아무리 많이 입력해도 1개만 표시합니다.

 

하나 이상의 공백을 표시하기 위해서  를 써야 하고요.

 

하지만 <pre>태그를 사용하면 공백이나 줄바꿈을 있는 그대로 표시합니다.

 

[html기초]  &nbsp;, br, pre, p 태그

 

 

 

▶white-space 속성값

 

 

normal 기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap)

 

nowrap 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시

 

pre 공백을 코드에 있는 그대로 표시함. <pre>태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음

 

pre-wrap 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨.

 

pre-line  공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며,

 

             코드에 줄바꿈이 있을 때도 그대로 표시

 

 

 

간단히 표로 정리하면 다음과 같습니다

 

	새로운 줄에서	공백과 들여쓰기	줄바꿈
normal	공백 1개만 표시	공백 1개만 표시	자동 줄바꿈
norwrap	공백 1개만 표시	공백 1개만 표시	줄바꿈 x
pre	공백을 있는 그대로 표시	공백을 있는 그대로 표시	줄바꿈 x
pre-wrap	공백을 있는 그대로 표시	공백을 있는 그대로 표시	자동 줄바꿈
pre-line	공백을 있는 그대로 표시	공백 1개만 표시	자동 줄바꿈

 

 

▶ white-space 브라우저 지원 정보

 

IE6 :  normal | pre | nowrap 

IE8+ : normal | pre | nowrap | pre-wrap | pre-line

FF3.0 : normal | pre | nowrap | pre-wrap | -moz-pre-wrap

FF3.5 : normal | pre | nowrap | pre-wrap | pre-line

Opera 8 : normal | pre | nowrap | pre-wrap

Opera 9.5 : normal | pre | nowrap | pre-wrap | pre-line

Safari 3.0 : normal | pre | nowrap | pre-wrap | pre-line

구글 크롬은 제가 사용하는 버전이 35.0 인데... 모든 속성값이 지원되는 것 같습니다.

 

 

▶html/css 작성 예를 보겠습니다 

 

html

<div id="one"> Once                          when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. </div> <div id="two"> Once                          when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. </div> <div id="three"> Once                          when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. </div>

  

 

css

div{ white-space: pre; }

 

 

가로 화면 300px , 400px, 500px div를 만들어 텍스트를 담아 보겠습니다.

 

 

▶white-space: normal 실행 화면 

white space.htm

 

 

 

 

▶white-space: nowrap 실행 화면 

white space nowrap.htm

 

 

 

 

▶white-space: pre 실행 화면

white space pre.htm

 

 

 

 

▶white-space: pre-wrap 실행 화면

white space pre-wrap.htm

 

 

 

 

▶white-space: pre-line 실행 화면

white space pre-line.htm

 

 

 

그런데 pre, pre-wrap, pre-line이 새로운 줄에서 줄바꿈이 된다고 했는데, 위 그림을 보면

 

맨 마지막 줄 다음에는 여백이 생기지 않습니다.

 

css2.1명세에 따르면,  새로운 문자가 시작될 때 여백이 생긴다고 하네요. 

 

 

 

  

[htm/css] word-spacing 속성(단어 간격)

 

[html/css] 글자 간격 지정 속성 letter-spacing

 

text-decoration 속성(none, underline, overline, line-through)

 

text-transform 속성 (대문자 전환)

 

[html/css] line-height 속성 배우기