친절한효자손 취미생활

오늘은 특정 영역에서 텍스트 정렬에 도움을 줄 수 있는 white-space 매소드에 대한 속성을 알아봅니다. 지난번 시간에 이어서 겹치는 부분도 있으니 혹시 어제의 강의를 놓치신 분들이 계시면 한 번 읽어보시는것도 괜찮을 것 입니다. 티스토리의 CSS를 수정하거나 개인만의 스타일로 꾸미는데 아는 것 만큼 더 발전할테니까요.

 

 

먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다.

 

white-space.html
0.00MB

 

다운로드가 완료되었다면 한번 실행해 보시기 바랍니다. 그러면 빨강, 초록, 파랑, 보라, 검정 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 상에서의 띄어쓰기는 &nbsp; 라고 하는 태그를 사용해야 합니다. 하지만 기본적으로 1회 정도는 일반적인 스페이스바를 사용해서 띄어쓰기를 표현할 수 있습니다. 스페이스바를 연속으로 여러번 적용시켜 띄어쓰기를 표현하고자 할 때, 혹은 줄바꿈을 표현하고자 할 때 pre 태그를 사용하게 됩니다.

 

그리하여 첨부파일을 살펴보시면 빨간색 박스의 텍스트는 일반적인 형태를 띄고 있습니다. 즉 white-space: normal은 기본값이라고 생각하시면 됩니다. 그리고 두번째인 초록색 DIV의 경우는 한 줄로 표현되어 있습니다. 이것이 어제 배운 부분 입니다. 즉 white-space: nowrap;은 "감싸지 않는다" 라는 의미를 담고 있습니다. 그래서 텍스트가 1줄로 표현이 됩니다. pre와 pre-wrap의 차이는 nowrap의 "줄바꿈 없음"의 차이 입니다. 예시를 보시면 무슨 뜻인지 금새 이해하실 겁니다. 이 두 속성의 공통점은 탭을 적용한 부분, 그리고 스페이스바를 여러번 적용시킨 부분이 모두 그대로 표시가 된다는 것 입니다. 또한 텍스트의 위/아래로 자동 줄바꿈이 적용되어 있는데 그것은 div 태그 바로 오른쪽에 텍스트가 입력된 것이 아닌, div 태그에서 엔터를 한 번 치고 그 다음 줄 부터 입력했기 때문 입니다. 따라서 pre 속성에 따라 해당 공란을 줄바꿈 처리를 하게 된 것 입니다. 사실상 이 4가지 속성만 기억하면 됩니다. 마지막의 pre-line은 거의 사용하지 않습니다. 쓸 일도 없구요. 그냥 저런게 있구나~ 하고 알고만 있으면 됩니다.

 

티스토리에서는 신형 글쓰기 에디터의 경우는 코드블럭 기능을 제공하기 때문에 편리하게 코딩 입력이 가능하지만 구형의 경우는 그렇지 않습니다. 따라서 구형에서의 코드 구현을 표현하고자 할 때는 div 박스 안에 pre-wrap 속성을 입력한다면 꽤 보기 좋게 정렬이 될 것 입니다. 끝.

 

 

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드