HTML의 태그들(5)

● <map> 태그

이미지 맵을 만드는 태그이다

<map> 태그는 몇 개의 <area> 태그를 포함한다

map 태그의 필수 속성

• name : map 태그의 이름을 지정한다.
  map 태그의 name 속성은 img 태그의 usemap 속성과 연관이 있기 때문에 반드시 적어줘야 한다

 

● <area> 태그

이미지 맵에서 영역을 지정하는 태그이다

area 태그의 속성

• coords : 영역의 좌표를 지정한다(도형의 꼭짓점 갯수만큼 필요)
• href : 해당 영역에 연결된 하이퍼 링크의 대상 url을 명시한다
• shape : 영역의 모양을 명시한다(defalut, rect, circle, poly)
• target : 영역을 클릭했을 때 대상 url이 열릴 위치를 명시한다
• alt : 영역에 대한 대체 텍스트를 명시한다. href 속성이 설정되어 있어야만 사용이 가능하다
• download : 사용자가 하이퍼 링크를 클릭할 때 해당 대상(target)으로 연결되지 않고
  해당 콘텐츠가 다운로드된다

shape 속성의 값

• default : 기본 값으로, 전체 영역이다
• rect : 사각형. 왼쪽 위 꼭짓점 (x, y) 좌표, 오른쪽 아래 꼭짓점 (x, y) 좌표
• circle : 원형. 중심점 (x, y) 좌표, 반지름
• poly : 다각형. 최소 3개 이상의 꼭짓점 (xn, yn) 좌표

 

● <table> 태그

테이블을 만드는 태그이다

● <caption> 태그

테이블의 캡션(테이블이나 사진, 삽화 등에 붙는 설명)을 정의할 때 사용하는 태그이다

<table> 태그는 단 하나의 <caption> 태그만을 명시할 수 있으며, 언제나 <table> 태그 바로 다음에 위치한다
테이블 바로 위쪽에 가운데 정렬되어 표시된다

● <thead> 태그

테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶을 때 사용한다

테이블의 각 영역(header, body, footer)을 명시하기 위해 <tbody>, <tfoot> 태그와 함께 사용한다

 

<table> 태그의 자식 태그로써, 반드시 <caption>, <colgroup> 태그 다음에 위치해야 한다

하나 이상의 <tr> 태그를 포함하고 있어야 한다

● <tbody> 태그

테이블에서 내용 콘텐츠들을 하나의 그룹으로 묶을 때 사용한다

테이블의 각 영역을 명시하기 위해 <thead>, <tfoot> 태그와 함께 사용한다
<table> 태그의 자식 태그로써, 반드시 <caption>, <colgroup>, <thead> 태그 다음에 위치해야 한다

하나 이상의 <tr> 태그를 포함하고 있어야 한다

● <tfoot> 태그

테이블에서 푸터 콘텐츠들을 하나의 그룹으로 묶을 때 사용한다

테이블의 각 영역을 명시하기 위해 <thead>, <tbody> 태그와 함께 사용한다
<table> 태그의 자식 태그로써, 반드시 <caption>, <colgroup>, <thead>, <tbody> 태그 다음에 위치해야 한다

● <tr> 태그

테이블에서 셀들로 이루어진 하나의 행(row)을 정의할 때 사용한다

<tr> 태그는 하나 이상의 <th> 태그나 <td> 태그를 포함할 수 있다

테이블을 구성하는 셀은 두 종류로 구분할 수 있으며,
하나는 <th> 태그를 사용한

헤더 정보를 저장하는 헤더 셀과

<td> 태그를 사용한

일반적인 데이터를 저장하는 데이터 셀

이다
<th> 태그 내의 텍스트는 기본적으로 굵은 폰트로 중앙 정렬되며, <td> 태그 내의 텍스트는 일반적은 두께의 폰트로 좌측 정렬된다

● <th> 태그

테이블에서 제목이 되는 헤더 셀을 정의할 때 사용한다

● <td> 태그

테이블에서 하나의 데이터 셀을 정의할 때 사용한다

<caption>, <thead>, <tbody>, <tfoot> 태그를 사용하지 않고 <tr>, <td> 태그로만 테이블을 만드는 경우가 있는데
검색 엔진은 표의 의미(시맨틱)를 파악하기 위해 <caption>, <thead>, <tbody>, <tfoot> 태그를 찾기 때문에 바람직하지 않다

 

table 태그의 속성

• border : 테이블의 테두리를 설정해준다. 값이 클수록 테두리가 두꺼워짐
• bordercolor : 테이블의 테두리 색상을 지정한다. 기본 색상은 검정색이다
• width : 테이블의 가로 크기를 지정한다

       (px 단위로 지정하면 창의 크기를 변경해도 고정된 크기지만, % 단위로 지정하면 창의 크기에 따라 비율이 달라진다)

• height : 테이블의 세로 크기를 지정한다
• align : 테이블 안에 있는 값들을 정렬시킨다. 셀의 가로 줄을 정렬(left, right, center)
• valign : 테이블 안에 있는 값들을 정렬시킨다. 셀의 세로 줄을 정렬(top, bottom, middle)
• bgcolor : 배경색을 지정한다
• colspan : 가로 셀을 합병시키는 기능을 한다(열 합병). 셀(가로 줄)을 합치는 갯수를 지정
• rowspan : 세로 셀을 합병시키는 기능을 한다(행 합병). 셀(세로 줄)을 합치는 갯수를 지정
• cellspacing : 셀과 셀 혹은 테이블) 사이의 여백을 지정한다
• cellpaddiing : 셀과 내용 사이의 여백을 지정한다
• nowrap : 자동 줄바꿈 방지 기능을 한다. (테이블 셀에서(<tr>, <td>) 사용함)

테이블의 형식

실행 코드

 

실행 결과