White-Space 속성 {CSS 코드 공부하기}

안녕, 오늘은 CSS 코드 공부하기야. CSS 코드들은 정말 다양해, 그리고 자주 사용되는 margin, padding. display, height, width, position 기타 등등 제외하면 간혹 사용되는 코드들이 있다. 오늘은 자주 사용되지 않는 코드들을 자세히 알아보고 잊어버리지 않기 위한 포스팅이다. 오늘 공부할 CSS 코드는 White-Space 속성 공부다.

White-Space 속성에는 Break-spaces, inherit, initial, none, Normal, Nowrap, Pre, Pre-wrap, Pre-line, unset, -webkit-nowrap등 너무 다양하다. 한 번에 기능을 알아보기 힘들다. 퍼블리셔는 코드를 인지하고 있어야 하지만 그들도 검색은 한다. 어떤 상황에서 어떤 코드를 사용하는지 인지 해야 검색도 가능하다. 취미로 코딩(예 : 블로그를 한다던가?)을 하는 경우 일단 개념을 잡는 것이 중요하다. 우리는 일단 개념을 잡아 보자.  

White-Space는 여백, 공백이란 개념으로 생각하면 된다. 하지만 일반적으로 생각하면 그런 여백이 아니다. 텍스트 보여지는 영역을 어떻게 다룰 것인가 포인트. 긴 타이틀이나 간략 설명 텍스트에 주로 사용된다. 

<span class="title">     포토샵 모자이크 하는법 - 포토샵 한글판 강좌 #05</span>

 위 Html 코드에서 포토샵 앞에 들여쓰기 공백이 있음을 유념하자.

텍스트를 표시하기 위해서는 표시되는 특정 사이즈가 있다. 가로 width가 100%로 반응형이라 해도 사이즈는 존재한다. 그 텍스트의 영역을 어떻게 관리할 것인가. 그 영역의 여백을 어떻게 관리할 것인가가 포인트이다. 사실 white-space 신경 쓰는 경우는 거의 없다. 하나의 예를 들면 텍스트 공간은 적고, 텍스트의 검색 데이터 값은 많았으면 할 때, 텍스트를 숨겼지만 검색으로는 표출이 되게 만드는 경우가 있다. 

white-space 속성 별 예시

 break-spaces  : 모든 공백을 보여준다. 한 줄이 너무 길어지면 자동으로 줄 바꿈.

 pre-wrap  : Break-spaces 와 비슷한 속성을 가지고 있으나, 처음 연속공백은 인지하나, 텍스트 후 연속 공백이 공간을 차지 하지 않습니다. 연속 공백을 한 번으로 정리한다.

 pre-line  : Pre-wrap 처럼 연속 공백을 하나의 공백으로 합치며 자동으로 합쳐진다. 포토샵 텍스트 앞쪽에 공간이 없는 것은 하나로 합쳐지면서 공백이 없는 것으로 인지.

 pre : 연속공백을 보여주면서 긴 텍스트가 넘쳐도 자동 줄바꿈을 하지 않는다.

 nowrap  : 연속공백을 표시하지 않으며, 긴 텍스트가 넘쳐도 자동 줄바꿈 하지 않는다.

 nomal : 가장 기본적인 디폴트 상태 연속 공백을 하나로 합치며, 긴 텍스트는 자동으로 줄 바꿈을 해준다. 하지만 줄바꿈 명령어를 공백으로 인식한다.

Nomal 속성을 제외하고는 <br />으로 줄바꿈이 이루어진다. Pre, Pre-wrap, Pre-line, Break-spaces는 개행문자에서도 줄바꿈이 이루어지지만 Html 요소에서는 개행문자를 신경 쓸 이유는 없다. (개행문자란? 컴퓨터에서 줄바꿈을 나타내는 제어문자) 

오늘은 White-Space에 대하여 알아보았다. 꼼수를 사용하기 위해 많이 쓰이지만 포털 검색량을 늘리기 위해 사용하는 것을 절대 비추이다. 위와 같은 방식으로 텍스트를 숨기는 것은 구글 쪽에서 절대 하지 말아야 할 행동에 들어간다. 인트라넷 사용이나 어쩔 수 없는 상황에서만 사용되어야 하겠다. (예: 주소 검색을 해야 하는 페이지에서 너무 긴 주소는 ...으로 표시되었을 경우 검색이 되지 않는 경우를 방지 하는 것이다.)

White-Space는 텍스트의 여백을 담당하는 것이 아닌 텍스트 영역의 여백을 관리하는 코드로 생각하면 편하겠다.
{CSS 코드 공부하기 카테고리는 취미로 퍼블리싱하다 제가 잊어버렸던 코드들을 정리한 카테고리입니다. 틀린 정보가 있을 수 있습니다. 잘못된 부분 지적 바랍니다. )