TABLE의 수평,수직 정렬 |
|
|
|
|
|
|
TABLE의 Width 와 Height 값 사용하기 |
테이블의 경계선(테두리) |
|
border 지정(X) |
border=0 | border=1 |
|
|
|
* border 를 지정하지 않으면 테두리가 생기지 않는다 (그래서 바탕색을 넣었다) |
|
border=1 bordercolor=#CC6600 |
border=2 bordercolor=#CC6600 |
border=3 bordercolor=#CC6600 |
|
|
|
|
border=1 bordercolor=#CC6600 bordercolorlight=#ededed |
border=2 bordercolor=#CC6600 bordercolorlight=#ededed |
border=3 bordercolor=#CC6600 bordercolorlight=#ededed |
|
|
|
border=1 bordercolor=#CC6600 bordercolordark=#666666 |
border=2 bordercolor=#CC6600 bordercolordark=#666666 |
border=3 bordercolor=#CC6600 bordercolordark=#666666 |
|
|
|
border=1 bordercolor=#CC6600 bordercolorlight=#ededed bordercolordark=#666666 |
border=2 bordercolor=#CC6600 bordercolorlight=#ededed bordercolordark=#666666 |
border=3 bordercolor=#CC6600 bordercolorlight=#ededed bordercolordark=#666666 |
|
|
|
* 두가지 속성 적용시 bordercolor 가 무시 당한다 |
|
TABLE의 BackGround 와 BgColor 로 배경 꾸미기 |
|
배경색의 우선은 가까운 td>tr>table>......>body 태그 순으로 우선적으로 적용된다 !! [......] 부분은 또 다른 테이블이 외부에서 감싸고 있을 경우 td부터 또 적용된다. 1. 테이블 배경색을 선으로 표현하기 : table bgcolor=#cccccc cellspacing=1 * 테이블의 색상을 더 진한 색으로 한 경우
2. 테이블 배경색을 선으로 표현하기 : table bgcolor=#ffffff cellspacing=1 * 테이블의 색상을 더 연한 색으로 한 경우
3. 테이블 배경색을 선으로 표현하기 : table bgcolor=#999999 cellspacing=1
4. 3번 테이블 속에 2번 테이블을 넣은 경우 전체 내용물에 선을 그릴 수 있다
|
|
이미지(img 태그)를 넣는 것과 배경이미지를 넣는 차이는 이미지위에는 다른 내용물을 올릴 수 없지만 배경이미지위에는 다른 이미지나 택스트를 올릴 수 있다. 배경이미지를 크기만큼 넣을 려면 테이블의 width,height 를 이미지 크기만큼 설정! 테이블 크기보다 이미지가 작다면 전체를 채울 때까지 반복되어 나타난다. 1. 테이블에 배경이미지 넣기 : table width=460 height=90 background="이미지파일 url"
2. 배경이미지위에 텍스트 올리기
* 5칸 짜리 테이블을 사용 (윤곽을 보려고 border=1을 줌) 3. 2번 텍스트 테이블을 1번 테이블 왼쪽 td에 넣기
3. 배경이미지위에 이미지 올리기 : 위의 오른쪽에는 이미지를 넣어본다
4. border값을 제거 하고 나면 아래처럼 된다
|
|
* 여러 칸 width를 정하는 경우 때에 따라 어느 한칸은 width를 주지 않는다.
|
TABLE의 CellPadding 과 CellSpacing 을 이용한 테이블 디자인 CellPadding은 하나의 셀(칸) 에서 내용물과 셀 경계가 얼마나 간격을 둘지를 얘기하는 것이고 ... 이 값을 높이면 내용물에서 셀의 경계선이 멀어지게 된다. CellSpacing은 개별 셀(칸)이 테이블이나 다른 셀로 부터 얼마나 간격을 줄 건지를 얘기하는 것 ... 이 값을 높이면 테이블로 부터 또는 다른 셀들과의 간격이 멀어지게 된다. 한가지 !!! 내용물 배치를 위한 뼈대를 만들 경우는 정확한 배치를 위해 둘다 "0" 을 사용한다. |
|
CellPadding 지정(X) CellSpacing 지정(X) Border 지정(X) |
CellPadding=0 CellSpacing=0 Border=0 |
CellPadding=3 CellSpacing=0 Border=0 |
|
|
|
* 첫번째 경우는 피하는게 좋겠다. 정확한 표현을 하는 습관을!!! |
|
|
CellPadding=3 CellSpacing=1 Border=0 table 에 bgcolor 적용 td 에 bgcolor 적용 |
CellPadding=3 CellSpacing=1 Border=0 table 에 bgcolor 적용 td 에 bgcolor 적용 |
CellPadding=3 CellSpacing=1 Border=0 table 에 bgcolor 적용 td 에 bgcolor 적용 |
|
|
|
|
|
|
CellSpacing=5
|
CellSpacing=5
|
CellSpacing=5
|
테이블 사용시 Border,CellPadding,CellSpacing 은 꼭 지정하고 사용하는 습관을 !!! |
* table height 가 80 인 경우 두 줄이 필요하다면 때에 따라 어느 한 줄은 height를 주지 않는다. 남은 height가 얼마인지 계산하지 않아도 된다.
|
테이블 태그 활용하기 |
■ 정밀한 여백이 필요할 때 |
문서 윗부분 |
==> | 정확하게 50픽셀 거리를 둬야 한다면 border=0 cellpadding=0 cellspacing=0 height=50 짜리 테이블을 사용할 수 있다 (물론 색상은 맞춰서 사용할 줄 아시겠지만~~) |
문서 아랫부분 |
■ 가로로 가는 선 긋기 (점선 이미지가 있다면 bgcolor대신 background를 !!!) |
두줄 테이블인데 아래줄은 다음 처럼 높이가 1이고 bgcolor를 주고 내용은 비워준다. <tr bgcolor="#ededed"> <td height="1" bgcolor="#CCCCCC"></td> </tr> |
■ 세로 가는 선 긋기 (물론 점선 이미지가 있다면 bgcolor대신 background를 !!!) |
두칸짜리 테이블에서 오른쪽 칸에 소스를 보면 <td width="1" bgcolor="#CCCCCC"></td> 처럼 이번엔 넓이가 1이고 선으로 보이는 bgcolor가 있고 내용은 아무것도 없다 왼쪽에도 세로선을 그려야 한다면 한칸이 더 필요하고 소스는 위와 같다. |
■ 게시판 목록보기를 만들기(라인만들기) |
| ||||||||||||||||||||||||||||||||
* 연습 : 테이블 bgcolor를 흰색으로 (라인없이)
* 연습 : 테이블 bgcolor를 진한색으로 (라인은 CellSpacing 이용)
|
■ 왼쪽 메뉴 리스트 만들기 |
|
보통 메뉴를 표현할 때 위에는 메뉴타이틀 이미지가 오게 되고(1) 그 아래 여러개의 세부 항목을 리스트로 나열한다. 세부항목 앞에는 작은 불릿 모양의 이미지를 두고(2) 그 옆에는 텍스트나 이미지로 항목이름을 둔다(3) * 옆은 두개의 테이블로 하나는 메뉴 타이틀, * 두칸 테이블로는 항목 리스트를 배치한 것이다. [출처] 빛남이 |
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|