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

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

테이블 응용


테이블을 깔끔하게 하는 방법으로 요즘 많이쓰고 있는 형태중에 하나가 테이블을 점선으로 만드는 것입니다. 요즘들어 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

번호 제목 글쓴이 날짜 조회
3285 이것은 AI파일 미리보기입니다. 댓글3 M 최고의하루 01.15 3593
3284 이미지미리보기pds파일미리보기파일입니다^^ 댓글2 99 단국강토 01.14 2830
3283 동영상 캡쳐(Capture) 아주 쉽게 하기~ 99 단국강토 01.14 2621
3282 자판기안의 특수문자 99 단국강토 01.13 2535
3281 ntdll.dll 오류 해결방법 M 최고관리자 01.12 4401
3280 인터넷 동영상 저장하기 - 넷트랜스포터 사용 - M 최고의하루 01.12 3104
3279 옛날 기사를 찾아보고 싶을때 99 단국강토 01.08 2234
3278 CD 음악 mp3로 바꾸기 99 단국강토 01.08 2504
3277 알씨로 초간단 동영상 슬라이드쇼 만들기 99 단국강토 01.07 2849
3276 IP 추적은 어떻게 하는가? 99 단국강토 01.07 2399
3275 일본어로 된 웹을 한글로 즐기기 99 단국강토 01.06 2356
3274 이것은 AI파일 미리보기입니다. 댓글2 M 최고의하루 01.15 4050
3273 이미지미리보기pds파일미리보기파일입니다^^ 99 단국강토 01.14 2453
3272 동영상 캡쳐(Capture) 아주 쉽게 하기~ 99 단국강토 01.14 2788
3271 공유기 차단 무력화 시키는 법 99 단국강토 01.13 3550
3270 자판기안의 특수문자 99 단국강토 01.13 2368
3269 ntdll.dll 오류 해결방법 M 최고의하루 01.12 3670
3268 인터넷 동영상 저장하기 - 넷트랜스포터 사용 - M 최고의하루 01.12 3231
3267 옛날 기사를 찾아보고 싶을때 99 단국강토 01.08 2173
3266 CD 음악 mp3로 바꾸기 99 단국강토 01.08 2489
3265 알씨로 초간단 동영상 슬라이드쇼 만들기 99 단국강토 01.07 3315
3264 IP 추적은 어떻게 하는가? 99 단국강토 01.07 2215
3263 일본어로 된 웹을 한글로 즐기기 99 단국강토 01.06 2311
3262 [컴퓨터 키보드, 특수문자 정식 명칭들] M 최고의하루 12.18 3705
3261 하드,CPU,RAM 지원표 M 최고의하루 12.18 2592
3260 award bios 어워드 바이오스 설정법 M 최고의하루 12.18 3948
3259 내장 그래픽카드 죽이는 법 M 최고의하루 12.04 4888
3258 컴퓨터 조립 M 최고의하루 12.04 2840
3257 USB 버젼 속도 차이 2 천진난만 02.20 2379
3256 제가 사용하고 있는 마케팅프로그램입니다 댓글1 3 천지인 05.23 13198
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취