CSS! white-space 속성에 대해 알아보자
오늘은 특정 영역에서 텍스트 정렬에 도움을 줄 수 있는 white-space 매소드에 대한 속성을 알아봅니다. 지난번 시간에 이어서 겹치는 부분도 있으니 혹시 어제의 강의를 놓치신 분들이 계시면 한 번 읽어보시는것도 괜찮을 것 입니다. 티스토리의 CSS를 수정하거나 개인만의 스타일로 꾸미는데 아는 것 만큼 더 발전할테니까요.
먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다.
다운로드가 완료되었다면 한번 실행해 보시기 바랍니다. 그러면 빨강, 초록, 파랑, 보라, 검정 DIV 박스가 있고 그 안에 텍스트가 들어 있을 겁니다. 또한 DIV 박스를 삐져나온 텍스트들도 보일 것 이고, 띄어쓰기가 이상하게 되어 있는 것들도 살펴보실 수 있을 겁니다. 각 div 태그에는 클래스명이 부여되어 있으며, 각각의 클래스명에는 white-space와 관련된 매소드 속성들이 적용되어 있을 겁니다. CSS 부분에 대해서만 따로 아래에 표기해 두겠습니다.
* {
padding: 0;
margin: 0;
background: #888;
}
div {
width: 300px;
height: auto;
padding: 10px;
margin: 10px;
color: white;
}
.a01 {
white-space: normal;
background: red;
}
.a02 {
white-space: nowrap;
background: green;
}
.a03 {
white-space: pre;
background: blue;
}
.a04 {
white-space: pre-wrap;
background: purple;
}
.a05 {
white-space: pre-line;
background: black;
}이렇게 들어가 있습니다. 문서 백그라운드는 짙은 회색으로 되어 있고, 글씨 색상은 흰색이며 DIV 박스 크기는 가로가 300px로 고정되어 있습니다. 그리고 각 div마다 white-space의 속성이 다르게 적용되어 있습니다. 다시 한 번 속성만 따로 모아서 보겠습니다.
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
이렇게 다섯가지 속성을 가지고 있습니다. 다음은 각 속성에 대한 설명 입니다.
| white-space 속성 | 탭(들여쓰기) 및 스페이스바(띄어쓰기) | 엔터(줄바꿈) |
| normal | 띄어쓰기 1칸으로 표시 | 자동 줄바꿈 |
| nowrap | 띄어쓰기 1칸으로 표시 | 줄바꿈 없음 |
| pre | 탭 및 스페이스바 적용 그대로 표시 | 줄바꿈 없음 |
| pre-wrap | 탭 및 스페이스바 적용 그대로 표시 | 자동 줄바꿈 |
| pre-line | 띄어쓰기 1칸으로 표시 | 자동 줄바꿈 |
HTML 태그 중에서 <pre> 라는게 있습니다. 이 태그는 텍스트를 자유롭게 표시할 수 있는 태그 입니다. 원칙대로라면 html 상에서의 띄어쓰기는 라고 하는 태그를 사용해야 합니다. 하지만 기본적으로 1회 정도는 일반적인 스페이스바를 사용해서 띄어쓰기를 표현할 수 있습니다. 스페이스바를 연속으로 여러번 적용시켜 띄어쓰기를 표현하고자 할 때, 혹은 줄바꿈을 표현하고자 할 때 pre 태그를 사용하게 됩니다.
그리하여 첨부파일을 살펴보시면 빨간색 박스의 텍스트는 일반적인 형태를 띄고 있습니다. 즉 white-space: normal은 기본값이라고 생각하시면 됩니다. 그리고 두번째인 초록색 DIV의 경우는 한 줄로 표현되어 있습니다. 이것이 어제 배운 부분 입니다. 즉 white-space: nowrap;은 "감싸지 않는다" 라는 의미를 담고 있습니다. 그래서 텍스트가 1줄로 표현이 됩니다. pre와 pre-wrap의 차이는 nowrap의 "줄바꿈 없음"의 차이 입니다. 예시를 보시면 무슨 뜻인지 금새 이해하실 겁니다. 이 두 속성의 공통점은 탭을 적용한 부분, 그리고 스페이스바를 여러번 적용시킨 부분이 모두 그대로 표시가 된다는 것 입니다. 또한 텍스트의 위/아래로 자동 줄바꿈이 적용되어 있는데 그것은 div 태그 바로 오른쪽에 텍스트가 입력된 것이 아닌, div 태그에서 엔터를 한 번 치고 그 다음 줄 부터 입력했기 때문 입니다. 따라서 pre 속성에 따라 해당 공란을 줄바꿈 처리를 하게 된 것 입니다. 사실상 이 4가지 속성만 기억하면 됩니다. 마지막의 pre-line은 거의 사용하지 않습니다. 쓸 일도 없구요. 그냥 저런게 있구나~ 하고 알고만 있으면 됩니다.
티스토리에서는 신형 글쓰기 에디터의 경우는 코드블럭 기능을 제공하기 때문에 편리하게 코딩 입력이 가능하지만 구형의 경우는 그렇지 않습니다. 따라서 구형에서의 코드 구현을 표현하고자 할 때는 div 박스 안에 pre-wrap 속성을 입력한다면 꽤 보기 좋게 정렬이 될 것 입니다. 끝.
