스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기

 

환경: Eclipse Mars

 

white-space 은 텍스트 관련 스타일 시트로 하얀색 공백, 즉 탭이나 스페이스바로 만들어진 공백 문자 처리 기능을 가지고 있습니다. 그리고 요소의 넓이를 넘어갔을 때 자동 줄 바꿈을 할 것인지 결정합니다. 흔히 프로그램의 소스 표현할 때 많이 쓰이죠.

 

문법은 아래와 같으며 white-space 의 값은 5가지가 있습니다. 각각의 값들에 특징을 알아보고 샘플 화면을 참고하시면 금방 이해가 가실 겁니다.

 

p {

  white-space: normal/pre/nowrap/pre-line/pre-wrap;

}

 

각 값들의 특징은 다음과 같습니다. 그리고 샘플에는 p 태그에 넓이 값을 줘서 텍스트가 넘어갔을 때 어떤 값들이 자동 줄 바꿈을 하는지 알아 보았습니다.

 

l  normal : 기본값이며 공백은 하나만 적용되고 요소의 넓이를 넘어가면 자동 줄 바꿈이 이루어 집다.

l  nowrap : 줄 바꿈과 공백을 적용하지 않는다.

l  pre : <pre> 태그와 같은 기능으로 Enter 만 줄 바꿈이 적용되고 텍스트가 요소의ㅣwidth 를 넘어가면 줄 바꿈이 되지 않는다.

l  pre-line: 새로운 줄에서 공백을 있는 그대로 표시하며 글 중간에 공백과 들여쓰기는 1개만 표시하고 나머지는 없앤다. 요소의 넓이를 넘어가면 자동 줄 바꿈이 된다. pre 와는 자동 줄 바꿈에 차이가 있다

l  pre-wrap: 새로운 줄에서 공백을 있는 그대로 표시하며 글 중간에 공백과 들여쓰기도 그대로 표시한다. 하지만 pre-line 은 글 중간에 공백은 1개만 표시한다. 요소의 넓이를 넘어가면 자동 줄 바꿈이 된다.

 

normal

 

기본값입니다. 아무 것도 적용하지 않은 default 와 동일하죠. 요소를 텍스트가 넘어갈 때 자동 줄바꿈이 이루어 지며 공백, 들여쓰기는 아무리 커도 1칸만 인정이 됩니다.

스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기

 

nowrap

 

요소의 넓이를 넘어갈 때 자동 줄 바꿈과 공백, 들여쓰기, Enter 줄 바꿈 모두 적용되지 않습니다

스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기

 

pre

 

요소의 넓이를 넘어가는 것은 자동 줄 바꿈이 되지 않고 Enter 만 적용됩니다. 공백과 들여 쓰기는 크기만큼 표시가 됩니다. 자동 줄 바꿈이 되지 않는 다는 것은 nowrap 와 같죠

스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기

 

pre-line

 

pre-line 은 줄 바꿈만 적용이 됩니다. 그러니까 요소의 넓이를 넘어갔을 때 자동 줄 바꿈과 Enter 를 눌러서 줄 바꿈을 한 경우 모두 적용이 되며 공백은 한 칸만 인정이 됩니다

스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기

 

pre-wrap

 

이 속성 값은 모든 것이 다 적용됩니다. Enter 줄 바꿈, 요소의 넓이를 넘어갔을 때 줄 바꿈, 공백, 들여쓰기의 크기만큼 모두 적용되는 옵션입니다. 그림을 보시면 쉽게 이해가 가실 겁니다. pre-line 과 차이점은 공백과 들여쓰기를 그대로 반영하느냐 안 하느냐입니다

스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기

 

전체 소스와 결과 화면

 

아래는 각 값들을 적용한 전체 소스와 실행한 결과 화면 입니다. 어떻게 반영이 되는지 비교해 보시면 쉽게 이해가 가실 겁니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
		font-size:14pt;
		width: 500px;
	}
	p {	background-color: #d4d4f2; 
		border-style: solid; 
		border-width: 1px;
		padding: 5px;
	}
	.whitespace1 { white-space: normal; }
	.whitespace2 { white-space: nowrap; }
	.whitespace3 { white-space: pre; }
	.whitespace4 { white-space: pre-line; }
	.whitespace5 { white-space: pre-wrap; }
</style>
</head>
<body>
<code>default</code>
<p>The current push to 
	implement labor market and broader structural 
	reforms is critical to South Korea overcoming 
its current 	  economic woes, the country's top policymaker said Sunday.
</p>
<code>normal</code>
<p class="whitespace1">The current push to 
	implement labor market and broader structural 
	reforms is critical to South Korea overcoming 
its current 	  economic woes, the country's top policymaker said Sunday.
</p>
<code>nowrap</code>
<p class="whitespace2">The current push to 
	implement labor market and broader structural 
	reforms is critical to South Korea overcoming 
its current 	  economic woes, the country's top policymaker said Sunday.
</p>
<code>pre</code>
<p class="whitespace3">The current push to 
	implement labor market and broader structural 
	reforms is critical to South Korea overcoming 
its current 	  economic woes, the country's top policymaker said Sunday.
</p>
<code>pre-line</code>
<p class="whitespace4">The current push to 
	implement labor market and broader structural 
	reforms is critical to South Korea overcoming 
its current 	  economic woes, the country's top policymaker said Sunday.
</p>
<code>pre-wrap</code>
<p class="whitespace5">The current push to 
	implement labor market and broader structural 
	reforms is critical to South Korea overcoming 
its current 	  economic woes, the country's top policymaker said Sunday.
</p>
</body>
</html>

스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군