white-space

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

white-space 는 공백으로 인한 줄바꿈 처리 방법을 지정합니다.

예제 1
설명이 어려워서 바로 예제로 들어갑니다. ^^; white-space 개요
보기
white-space :
white-space : normal
width :
400px
width : 400px
When the sun shines on the mountains And the night is on the run It's a new day It's a new way And I fly up to the sun I can feel the morning sunlight I can smell the new mown hay I can hear god's voices calling On my golden skylight way

나의 모든 사랑이 떠나가는 날이 당신의 그 웃음 뒤에서 함께하는데 철이 없는 욕심에 그 많은 미련에 당신이 있는 건 아닌지 아니겠지요 시간은 멀어 집으로 향해 가는데 약속했던 그대만은 올 줄을 모르고
설명

- white-space : normal 처럼 사용합니다.

속성
- normal
: 기본값 입니다.
- pre : <pre> 태그와 같은 처리를 합니다. 엔터키는 <br> 처리되며 줄바꿈은 작성된 형태대로 유지됩니다.
- nowrap : 줄바꿈을 하지 않습니다. 지정된 영역을 뚫고 나갈 수 있죠.
- pre-wrap : pre 와 같으나 줄바꿈 처리가 됩니다.
- pre-line : pre-wrap 보다 줄바꿈 처리가 좋습니다. (애매하군요 ^^;)


위 텍스트 부분의 태그 구성

<div class="css_test">
When the sun shines on the mountains And the night is on the run
It's a new day It's a new way And I fly up to the sun

I can feel the morning sunlight I can smell the new mown hay
I can hear god's voices calling On my golden skylight way
<br><br>
나의 모든 사랑이 떠나가는 날이 당신의 그 웃음 뒤에서 함께하는데

철이 없는 욕심에 그 많은 미련에 당신이 있는 건 아닌지 아니겠지요

시간은 멀어 집으로 향해 가는데 약속했던 그대만은 올 줄을 모르고
</div>

연구 1
쉬어가는 곳 - 예제에 사용된 팝송
설명

예제의 영문 부분은 팝송의 가사입니다
Una paloma blanca - George Baker Selection (추억의팝송)
http://superkts.nayana.com/midi3496

재미있고 유쾌한 곡이죠 ㅎㅎ

+ 관련 CSS +