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

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

테이블 응용


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

번호 제목 글쓴이 날짜 조회
2985 Table 태그 (2) 99 단국강토 02.09 2240
열람중 테이블 응용 99 단국강토 02.09 2352
2983 프레임 tag-프레임(1) 99 단국강토 02.09 2149
2982 프레임(2) 99 단국강토 02.09 2147
2981 form tag-form (1) 99 단국강토 02.09 1991
2980 form(2) 99 단국강토 02.09 1802
2979 form-(4) 99 단국강토 02.09 2267
2978 아름다운글 올리는 방법 5 마퀴 태그 99 단국강토 02.09 2300
2977 이미지의 태그 처리 99 단국강토 02.09 2253
2976 글쓰기/FIELDSET source 99 단국강토 02.09 2531
2975 블로그 영상시, 나도 만들어 볼까? 99 단국강토 02.09 2291
2974 동적 테이블 생성 DHTML 99 단국강토 02.09 2986
2973 table,tr,td 의 innerHTML 속성으로 좀 가꾸놀기 99 단국강토 02.09 3923
2972 CSS를 활용한 INPUT FORM의 커스트마이징 기법 99 단국강토 02.09 2887
2971 테이블 테두리를 가늘게 하는 확실한 팁 99 단국강토 02.09 2270
2970 스타일시트를 적용시키는 3가지 방법 99 단국강토 02.09 2059
2969 cursor:hand 을 cursor:pointer 로 교체요 ^^ 99 단국강토 02.09 2266
2968 ID attribute selector 99 단국강토 02.09 1496
2967 폼테그쓸때 테이블정렬이 잘안될때 쓰이는 css 99 단국강토 02.09 1602
2966 홈페이지 제작시 사용되는 CSS 정리 99 단국강토 02.09 1342
2965 부드럽게 펼쳐지는 콤보박스형 메뉴 99 단국강토 02.09 1673
2964 [CSS]스타일시트로 배경그림 고정시키기 99 단국강토 02.09 1676
2963 아이프레임 일부기능 대체할 수 있는 박스 99 단국강토 02.09 3230
2962 페이지 한개에서 모든것을 해결할 수 있는 탭메뉴 스크립트 99 단국강토 02.09 1406
2961 [CSS]글씨 크기-줄 간격 조절해서 보기 좋은 문서 만들기 99 단국강토 02.09 3308
2960 아이프레임 일부기능 대체할 수 있는 박스 99 단국강토 02.09 1308
2959 백그라운드 반복없이 한번만 넣기 99 단국강토 02.09 1861
2958 JAVASCRIPT + DOM 을 이용한 데이터 검색 99 단국강토 02.09 2785
2957 JAVASCRIPT + DOM 을 이용한 데이터 검색 99 단국강토 02.09 1961
2956 DOM 참조(JavaScript이용) 99 단국강토 02.09 1621
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취