|
스타일 시트 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칸만 인정이 됩니다.
|
◎ nowrap |
▼ 요소의 넓이를 넘어갈 때 자동 줄 바꿈과 공백, 들여쓰기, Enter 줄 바꿈 모두 적용되지 않습니다.
|
◎ pre |
▼ 요소의 넓이를 넘어가는 것은 자동 줄 바꿈이 되지 않고 Enter 만 적용됩니다. 공백과 들여 쓰기는 크기만큼 표시가 됩니다. 자동 줄 바꿈이 되지 않는 다는 것은 nowrap 와 같죠.
|
◎ pre-line |
▼ pre-line 은 줄 바꿈만 적용이 됩니다. 그러니까 요소의 넓이를 넘어갔을 때 자동 줄 바꿈과 Enter 를 눌러서 줄 바꿈을 한 경우 모두 적용이 되며 공백은 한 칸만 인정이 됩니다.
|
◎ pre-wrap |
▼ 이 속성 값은 모든 것이 다 적용됩니다. Enter 줄 바꿈, 요소의 넓이를 넘어갔을 때 줄 바꿈, 공백, 들여쓰기의 크기만큼 모두 적용되는 옵션입니다. 그림을 보시면 쉽게 이해가 가실 겁니다. pre-line 과 차이점은 공백과 들여쓰기를 그대로 반영하느냐 안 하느냐입니다.
|
◎ 전체 소스와 결과 화면 |
▼ 아래는 각 값들을 적용한 전체 소스와 실행한 결과 화면 입니다. 어떻게 반영이 되는지 비교해 보시면 쉽게 이해가 가실 겁니다.
<!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' 카테고리의 다른 글
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
|---|---|
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
| 스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 (0) | 2019.03.17 |
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
| 스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음 (0) | 2019.02.12 |
| 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
| 스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 (0) | 2019.01.06 |
| 인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
