스타일시트 (SPAN) . 테이블 고정하기.

오늘은 오후에 아주 먼길을 가야하므로, 잠시 틈을 타서 글을 적기로 마음을 먹었다.
물론 별 의미없는 글일지 모르겠으나 - 시작하는 디자이너분들에게는 유용한 정보일지 모르니 적어 내려가본다. 

디자이너들이 가장 많이 만드는 페이지중 하나는 "게시판" 이다.

 글쓰기,수정,삭제,리플,리스트 등등 게시판에는 상당히 많은 페이지가 필요하며 디자이너들은 아주 귀찮은 작업이라는걸 느끼게 된다. 그리고 이 작업들이 반복 될수록 디자이너들은 자신만의 꼼수를 만들어 게시판을 쉽고 빨리 만들수 있게 작업을 해둔다.

물론 프로그래머들도 페이징 프로그램,DB사용 로직 등 많은 부분들을 예전에 짜둔 프로그램을 살짝씩 수정해서 사용하기 일쑤. 

(아주아주 지겨워 죽을것 같은 게시판... 게시판 디자인만 수백개는 한것같다.)

  

오늘의 강좌는 이게 촛점이 아니라 바로 게시글이 화면을 벗어남을 막아주는 아주 간략한 꼼수를 소개하고자 한다.

 

초보 디자이너나 프로그래머라면 반드시 한번쯤 겪고 넘어가는 게시글이 화면을 벗어나버리는 현상!!

도대체 이녀석은 어떻게 하면 막을수 있을까. 아무리 찾아봐도 <PRE 태그, 혹은 문자를 왼쪽에서 몇글짜이상 되면 ".." 을 붙이는 프로그램 (ASP 에서는 Left(content,30) 이런식으로 문자를 30개까지만 표현할수 있는 함수가 있다.) 을 사용하기도 한다.

 

영어는 1byte 한글은 2byte , 아주아주 귀찮은 작업이다. 이녀석들을 계산해서 화면을 벗어나지 않게 하려니 너무너무 귀찮고

왠지모르게 화면 부하도 커지는것 같아. (프로그램이 계산을 해야하기 때문)

 

(게시글이 길어 화면이 늘어나버린 상황 / 대충 만들다 보니 -.,-;;; 이해해주길 바란다.)

 

s의 숫자는 위,아래가 같다.

하지만 테이블은 아래만 늘어나 있다.

  

1.CSS에는 화면에 출력범위를 설정할수 있다.

 

위 이미지에서 위의 테이블은 Style 을 적용한 것이고 아래는 Style을 적용하지 않은것이다.

 

스타일시트는 화면에 출력할 내용을 일정 범위안에서만 이루어지게 만들수 있다. 물론 그 출력 내용은 보이지는 않지만

모두 출력은 되어 있으며, 단지 눈으로만 보이지 않을 뿐이다.

 

2.소스를 파헤쳐보자.

 

<span style="width:200;height:16px;overflow:hidden">

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

</span>

 
그리고 저 SPAN의 의미는

 스팬 [span]
[명사]
1 <건설>=경간(徑間).
2 <항공>비행기의 한쪽 날개 끝에서 다른 한쪽까지의 너비.

이렇게 나와있다.

 =========================================================================================================

자 소스를 하나하나 풀어보자.

span                         : 공간을 의미한다. DIV라는 녀석와 비슷한 역할을 하나 그 의미는 조금 다르다.
style="                      : 스타일시트의 명령을 시작한다.
width:200;                  : 좌우 폭은 200px
height:16px;               : 상하 폭은 16px
overflow:hidden"        : overflow(넘침) 되는 모든것들은 Hidden 시켜라.

======================================================================================================

 이 속에 들어오는 모든 객체는 위 SPAN 의 STYLE에 근거하여 출력하라. 라는 뜻으로 볼수 있겠다.
그럼 가상의 Span 공간이 생겨나게 되며,아래의 그림처럼 된다. 

(아무리 글짜가 길어도 저 공간밖으로 벗어나게 되면 출력 되지 않는다.

하지만 저 속에는 모든 글짜가 포함은 되어 있다.)

 메모장을 열어 실험해보면 어느정도 감이 잡힐 것이다.
어떠한 객체가 들어오든 간에 저 속에서 화면에 출력됨을 알수 있을것이다.

 이건 게시판 뿐 아니라 좁은 공간에서의 출력에서 아주 유용하게 사용되며 테이블 깨짐을 방지할수 있을것이다.

 이제 사용법을 알았으니, 입맛에 따라 웹페이지를 요리해 보도록 하자.

 오늘은 여기까지 - 

잘 모르겠으면 무작정 소스만 퍼서 따라해보자 -