▣ table(테이블)에 대하여(3)
이번 시간에는 여백조절과 배경이나 테두리 등의 색상 넣는
방법에 대하여 알아보겠습니다.
1. 여백 조절
여백 조절과 칸과 칸 사이를 조절하는 속성에는 cellpadding과
cellspacing 이 있습니다.
(1) cellpadding
테두리와 내용사이가 너무 가까워서 조금 떨어뜨리고자 할 때
쓰는 속성이 cellpadding입니다.
속성 값은 숫자이며 단위는 픽셀입니다.
이 속성을 생략하면 기본값=1 로 나타납니다.
태그 작성 예시
- 여백이 하나도 없는 경우(cellpadding=0)
<table border=2 cellpadding=0>
<tr>
<td>HTML 기초를 열심히 공부하면 고수가 되겠지?</td>
</tr>
</table>
결과 보기
HTML 기초를 열심히 공부하면 고수가 되겠지?
- 여백값을 20픽셀 준 경우(cellpadding=20)
<table border=2 cellpadding=20>
<tr>
<td>HTML 기초를 열심히 공부하면 고수가 되겠지?</td>
</tr>
</table>
결과 보기
HTML 기초를 열심히 공부하면 고수가 되겠지?
(2) cellspacing
테두리의 칸과 칸 사이 거리도 조절이 가능합니다.
cellspacing이라는 속성으로 속성 값은 숫자이고 단위는 픽셀이다.
이 속성을 생략하면 기본값은 2입니다.
태그 작성 예시
- 칸과 칸 사이 값이 하나도 없는 경우(cellspacing=0)
<table border=2 cellspacing=0>
<tr>
<td>HTML 기초를 열심히 공부하면 고수가 되겠지?</td>
</tr>
</table>
결과 보기
HTML 기초를 열심히 공부하면 고수가 되겠지?
- 칸과 칸 사이 간격을 20픽셀 준 경우(cellspacing=20)
<table border=2 cellspacing=20>
<tr>
<td>HTML 기초를 열심히 공부하면 고수가 되겠지?</td>
</tr>
</table>
결과 보기
HTML 기초를 열심히 공부하면 고수가 되겠지?
2. 배경색 채우기
배경색(바탕색)을 채우는 속성은 bgcolor 입니다.
속성 값으로는 색상이름을 영어로 입력하거나 RGB(16진법)의
색상코드번호입니다.
기본 형식은 bgcolor=red입니다(빨강색을 예로 든 경우임)
이 속성을 쓸 수 있는 태그 종류는 body, table, tr, td입니다.
어떤 차이가 있는지 알아봅시다.(모두 빨강을 예로 든 경우입니다)
(빨강의 색상명은 red이고 색상코드번호는 #ff0000입니다)
<body bgcolor=red> - 브라우저 전체에 빨강색으로 채워진다.
<table bgcolor=#ff0000> - 테이블 전체에 빨강색으로 채워진다.
<tr bgcolor=ff0000> - 해당 행 전체에 빨강색으로 채워진다.
<td bgcolor=red> - 해당 칸에만 빨강색으로 채워진다.
<table>태그는 테이블 자체를 만드는 태그이므로 여기에 bgcolor를
주면 테이블 전체에 배경이 입혀지고
<tr>태그는 행을 만드는 태그이므로 여기에 bgcolor를 입히면 해당하는
행에만 색이 입혀지며, < td> 태그는 칸을 만드는 태그이므로 당연히
해당하는 한 칸만 색이 입혀지게 되죠.
1칸짜리 밖에 없는 테이블은 <table>이나<tr>, <td> 어디에
bgcolor를 입혀도 효과는 같습니다.한 칸 자체가 테이블이기 때문이죠.
태그 작성 예시
테이블 배경에 노랑색으로 테두리두께는 4픽셀, 테이블의 넓이는
500픽셀, 높이는 100픽셀로 만들고
첫째 행에는 핑크색 배경으로 채워주고( tr bgcolor=pink)
두번째 행의 첫째 인천 칸은 파란색으로 채우고(td bgcolor=blue)
나머지 행과 칸에는 별도 명령을 주지않기 때문에 모두 테이블의
배경색인 노란색으로 채워지겠죠?
<table bgcolor=yellow border=4 width=500 height=100>
<tr bgcolor=pink>
<td>서울</td>
<td>부산</td>
<td>대구</td>
</tr>
<tr>
<td bgcolor=blue>인천</td>
<td>광주</td>
<td>제주</td>
</tr>
<tr>
<td>북부</td>
<td>중부</td>
<td>남부</td>
</tr>
</table>
결과 보기
서울
부산
대구
인천
광주
제주
북부
중부
남부
3. 배경그림 채우기
이건 배경색 채우기 보다 더 많이 사용되는 것이죠.
배경그림을 나타내는 속성은 background 으로 <table>태그,
<td&glt;태그에는 적용이 됩니다.
기본 형식은 background=“배경이미지 주소“ 입니다
태그 작성 예시
<table background=back.gif border=5 bordercolor=yellow
width=500 height=100>
<tr>
<td>서울</td>
<td>부산</td>
</tr>
<tr>
<td>우리나라</td>
<td>대한민국</td>
</tr>
</table>
결과 보기
서울
부산
우리나라
대한민국
여기까지 잘 따라 오신 분들을 위해 보너스를 드리겠습니다.
보너스가 생겨야 재미가 더 있겠죠?
보너스 하나,
배경그림이 만약 테이블 크기보다 작다면 배경그림은 타일 형식으로
반복되어 나타납니다.
따라서 타일처럼 보여도 흉하지 않은 그림을 사용하는 것이 좋겠죠.
아니면 타일처럼 보이지 않고 딱 1장만 보이게 하려면 테이블 크기를
배경그림 크기와 같게 해줘야 합니다. 배경그림 크기 확인은 그림
위에서 마우스 오른쪽 클릭하여 나타나는 창에서 “속성“을 클릭하여
나타나는 “등록정보”창에서 그림크기를 보면 수치 × 수치 픽셀 인데
앞의 수치가 가로 크기, 뒤의 수치가 세로크기라는 것 알죠?
배경그림의 원래 크기가 작은 그림을 큰 테이블에 꽉 차게 만들 수는
없습니다.(다음에 스타일시트의 배경제어에 보면 background-repeat
이라는 속성이 있습니다. 그때 참고하기로 하죠)
보너스가 별로다고요? 그럼 더 큰 보너스를 하나 드리죠.
보너스 둘,
img src =“이미지 주소“와 background =“이미지 주소“의 비교
여러분들이 웹 서핑을 하다보면 영상시나 음악 감상을 할 경우가
많지요. 그런데 어떤 경우에는 이미지 위에 글씨가 써 있는 경우가
있고 이미지는 별도이고 상하나 좌우에 글씨가 써 있는 경우가
있을 것입니다. 이런 경우 보통 레이어를 쓰거나 스위시, 플래시,
포토샵 등을 이용하여 만드는 경우가 많은데 html 에서도 간단하게
만들 수가 있습니다.
이제부터 방법을 알아봅시다.
<table> 태그나 <td>태그 뒤에 <img src= 이미지 주소> 하면 이미지
위에 글씨를 쓸 수가 없습니다.
<table> 태그나 <td>태그 안에 background 속성을 넣어야 배경그림
위에 글씨가 나타납니다.
즉 테이블 전체에 그림을 넣고 그 위에 글씨를 넣고 싶다면
<table background=이미지 주소><tr><td>넣고 싶은 글이나 시,
노래제목 등을 써 넣고 </td></tr></table> 이렇게 하면 됩니다.
4. 테두리의 색상조절
테이블의 테두리 색깔도 지정해 줄 수 있습니다.
속성은 bordercolor로 형식은 bordercolor=색상명 또는
색상코드번호입니다. 이 속성 또한 테이블 전체나 tr태그나
td태그에 적용하여 해당 부분에만 색상을 적용할 수 있습니다
태그 작성 예시
<table border=5 bordercolor=yellow bordercolordark=black
width=500 height=50>
<tr>
<td>테두리에 색상 넣기</td>
</tr>
</table>
결과 보기
테두리 색상 넣기
이 속성을 주지 않으면 테두리는 기본인 회색으로 나타납니다.
여기에서도 간단하나마 테이블에 음영을 주어 좀 색다른 효과를
내는 간단한 요령을 알아봅시다.
bordercolordark 라는 속성입니다.
bordercolordark=black를 검정으로 줘서 노란테두리의 음영이
살아나는 느낌을 줍니다.
태그 작성 예시
<table border=5 bordercolor=yellow bordercolordark=black
width=500 height=50>
<tr>
<td>테두리에 색상과 음영이 생기죠?</td>
</tr>
</table>
결과 보기
테두리에 색상과 음영이 생기죠?
<팁> 이중 테이블 작성 - 깔끔한 느낌
예를 들어 어떤 테이블은 아예 전체 색깔을 파랑으로 해줍니다..
그런 다음 그 위에 겹쳐질 테이블은 흰색의 바탕으로 만들되 그 밑의
테이블보다 아주조금 작게 해서 덮어주면 되는 겁니다.
바탕에 있는 테이블과 덮어질 테이블의 크기차이는 아주 근소해야겠죠.
즉, 바탕 테이블의 cellpadding(테두리와 내용의 간 조정)을 1로하고
cellspacing(테두리 간격조정)을 0으로 줘야합니다.
그리고 바탕 테이블의 <td>에 한번 더 테이블 태그를 줍니다.
작성 예시
<table bgcolor=blue cellpadding=1 cellspacing=0 width=300><tr><td>
<table bgcolor=white width=300>
<tr>
<td>이중 테이블 직성</td>
</tr>
</table>
</td>
</tr>
</table>
결과 보기