강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

테이블 응용
작성자 : 99 단국강토
등록날짜 : 2009.02.09 10:07
2,352

테이블 응용


테이블을 깔끔하게 하는 방법으로 요즘 많이쓰고 있는 형태중에 하나가 테이블을 점선으로 만드는 것입니다. 요즘들어 dot(점선) 형태로 테이블을 만드는 홈페이지가 무척 많아졌습니다. 스타일시트를 이용하여 dot 형태의 테이블을 만들 수도 있지만, 스타일시트를 이용하여 만들면 explorer 5.0 이하의 버전을 쓰고 있는 사람들에게는 보이지가 않습니다. 즉, explorer 5.5 이상의 버전에서만 보입니다.(스타일시트를 이용하여 점선으로 만드는 것은 제 홈페이지의 css 부분에서 border-style 부분을 참고하세요.)
그래서 대부분의 사람들이 이미지를 이용하여 dot 형태의 테이블을 만들고 있습니다. 이미지를 이용하여 만들면 다양한 형태의 dot 형식의 테이블을 만들 수 있어 보다 이쁘고 아름다운(?)형태의 테이블을 구현할 수 있습니다. 이미지 작업을 하려면 포토샵이나 페인트샵을 이용하여 작업을 해야하는데 방법은 어렵지 않으니 제가 설명하는 형식으로만 따라하셔도 되리라 생각합니다. ^^;


 포토샵으로 이미지 작업

이미지 제작(포토샵) : dot_red.gif <- 이런형태의 이미지를 제작합니다. 이 그림은 확대한 것이고 원래그림은 너무작아 눈으로는 안보입니다.
1. file --> new 를 열고 다음과 같이 지정을 합니다.pho_1.gif

2. 가로세로 3pixel 로 했으니 이미지가 너무 작습니다. 그래서 navigator 팔레트를 이용하여 이미지를 최대 1600% 까지 확대합니다.
3. 사각형 선택툴을 이용하여 가로 세로 1pixel 의 사각형을 대각선으로 3개를 만듭니다.

4.  옆에있는 foreground(빨간부분)를 클릭하면 color picker 가 나타나는데 거기서 원하는 색상을 선택합니다.
5. edit --> fill 를 선택해서 나오는 대화상자에서 foreground 를 선택하면 dot_red.gif 와 같은 이미지가 만들어 집니다.
6. file --> save for web 를 선택해서 이미지를 gif 형태로 저장하면 작업끝~~~입니다.


 dot(점선) 테이블


[예제]
강상호의 HTML & CSS
[소스] <table height=30 cellspacing=1 cellpadding=0 width=200 align=center background=images/dot_red.gif>
<tr><td align=center>
<table height=30 width=100% bgcolor=#ffffff>
<tr><td align=middle>강상호의 HTML & CSS </td></tr>
</table>
</td></tr>
</table>
[설명]

위의 소스를 보면 테이블안에 또 테이블이 들어 간 것이 보일겁니다.
첫번째 테이블의 길이를 200, 높이를 30으로 정하고 두번째 테이블도 역시 똑같은 크기로 했습니다. 첫번째 테이블의 배경을 우리가 제작한 이미지로 정했습니다. 만약 2번째 테이블이 없다면 체크무늬형태의 배경이 될것입니다. 그 첫번째 테이블 위에다가 2번째 테이블을 올리고 흰색으로 배경을 정했으니 2개의 테이블이 겹쳐 질것입니다.
여기서 중요한 것이 첫번째 테이블의 cellspacing 입니다. cellspacing 란 "셀 사이의 간격" 이므로 2번째 테이블도 첫번째 테이블의 셀안에 들어가 있으므로 cellspacing 이 적용됩니다.
우리가 아까 만든 이미지가 1pixel 에 사각형 한개가 들어 갔으므로 1pixel 를 정해 준것입니다.
만약 아까 이미지의 대각선 길이를 길게 하면 점선의 간격이 그 만큼 커집니다.


 움직이는 dot(점선) 테이블


[예제]
강상호의 HTML & CSS
[소스] <table height=30 cellspacing=1 cellpadding=0 width=200 align=center background=images/dot_mov.gif>
<tr><td align=center>
<table height=30 width=100% bgcolor=#ffffff>
<tr><td align=middle>강상호의 HTML & CSS </td></tr>
</table>
</td></tr>
</table>
[설명]

사용 방법은 위에 있는 dot table 과 똑 같습니다. 다른점이 있다면 이렇게 (dot_mov.gif) 움직이는 이미지가 들어갔다는 점만 다릅니다.
점선이 돌아가는것 처럼 보이는 테이블은 실질적으로는 좌우로 왔다 갔다 하는 이미지를 배경으로 설정한 것뿐입니다.
움직이는 이미지는 "gif-애니메이터" 나 " 이미지레디" 를 이용하여 제작하면 됩니다. 그렇게 어려운 것은 아니므로 책을 보면서 공부하시기 바랍니다.

[출처]  빛남이

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
자세히보기

Comments

번호 제목 글쓴이 날짜 조회
315 INPUT TYPE - TEXT 속성 M 최고의하루 12.04 2015
314 [HTML] 메타태그 정리 99 단국강토 01.05 1573
313 새창 띄울때 메뉴바 없는 윈도우 창 99 단국강토 12.30 1386
312 동영상 그림크기조절 99 단국강토 12.30 3111
311 상태바에서 움직이는 문자 M 최고의하루 12.26 2096
310 노프레임 사이트 주소 고정법 M 최고의하루 12.26 1604
309 음악 태그 사운드 태그 댓글1 M 최고의하루 12.24 2934
308 그림을 배경 전체그림으로 넣는 소스 M 최고의하루 12.24 2107
307 [글 중간에 점 찍기] M 최고의하루 12.23 2066
306 htmlarg v1.1 - editplus 용 M 최고의하루 12.23 2336
305 배너광고 소스 marquee M 최고의하루 12.20 1617
304 FORM 태그 기본 ★ M 최고의하루 12.20 2182
303 한글 및 이미지 정렬 M 최고의하루 12.19 1422
302 폼요소 - 라디오 버튼(radio button) M 최고의하루 12.19 2099
301 Embed을 이용한 멀티미디어 사용 M 최고의하루 12.18 1627
300 input file 을 이미지로 변환 M 최고의하루 12.18 1832
299 INPUT TYPE - TEXT 속성 M 최고의하루 12.04 2200
298 태그강좌 99 단국강토 02.10 2088
297 태그 총 정리(태그 사전) ★ 99 단국강토 02.10 2134
296 태그를 배우려면 이런것들을 알아야.. 99 단국강토 02.10 3452
295 태그폰트 99 단국강토 02.10 2103
294 문자관련tag-텍스트 99 단국강토 02.10 1696
293 리스트 99 단국강토 02.10 2202
292 문단관련teg-문단(1) 99 단국강토 02.10 2342
291 문단과 관련된 태그 (2) 99 단국강토 02.10 2385
290 바디와 선 99 단국강토 02.09 1706
289 Table 태그 (1)-table 99 단국강토 02.09 2391
288 Table 태그 (2) 99 단국강토 02.09 2241
열람중 테이블 응용 99 단국강토 02.09 2353
286 프레임 tag-프레임(1) 99 단국강토 02.09 2150
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취