map tag

이미지를 자르지 않고 링크를 설정할 때.

1. 링크를 설정할 영역을 지정
<map name="이름" id="아이디"> 
  <!--웹 브라우저에 따라 name속성의 값을 인식하는 브라우저와 
  id속성을 인식하는 브라우저가 존재.-->
  <area shape="영역의 종류" coords="좌표" href="링크" title="풍선도움말"/>
</map>

2. 이미지에 링크가 설정된 map 적용.
<img src="이미지 경로" usermap="#이름"/>

* 사각형(rect)으로 area설정
<map name="testMap" id="testMap">
  <area shape="rect" coords="x1,y1,x2,y2" title="" href=""/>
  						  시작좌표 / 끝좌표
  <area shape="rect" coords="x1,y1,x2,y2" title="" href=""/>
  
* 원으로 설정
  <area shape="circle" coords="x1,y1,r" title="" href=""/>
  							중심좌표 / 반지름
</map>
<img usemap="#testMap">

frame

• web browser에서 여러 개의 HTML을 동시에 로딩해야할 때 사용.
• frame과 iframe 두 가지가 제공.
  frame : Web browser의 전체를 나눌 때 사용. 페이지의 전체 디자인을 만들 때.(웹 초기)
  iframe : Web browser의 일부분을 나눌 때 사용. 특정 부분에 다른 HTML을 끼워 넣어 보여줄 때.

iframe

HTML의 특정 부분에서 다른 HTML을 끼워넣어 보여줄 때.

<iframe src="보여줄 html URL" width="넓이" height="높이" name="이름"
        frameborder="테두리선의 두께" scrolling="스크롤바의 여부"></iframe>

<a href="이동할 HTML URL" target="HTML이 보여질 frame 이름">클릭</a>
-사용자가 클릭하면 현재페이지를 갱신하는 것이 아닌 <frame> 
 또는<iframe>에서 HTML이 보여진다.
-target에서 frame의 name속성을 찾을 수 없다면 "새창"으로 보여진다.

---

table 태그

데이터를 정리하여 보여줄 때 사용.

<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> 태그로 구성

* <table> 테이블을 시작할 때.
  테이블 태그의 대부분의 속성은 HTML5에서 지원하지 않는다.
  
<table border="테이블선 두께" color="선의 색" width="넓이" height="높이" 
       background="바닥이미지" bgcolor="바닥색" 
       align="수평정렬"(left,center,right) 
       cellpadding="td 안여백" cellspacing="td 사이여백">

* <tr> 행을 시작할 때 사용. (<th>나 <td>만 가질 수 있다.)
  	<tr height="행의 높이" background="바닥 이미지" bgcolor="바닥색" 
        align="수평정렬" valign="수직정렬"(top, middle, bottom)>
* <th> 열의 제목(header)을 설정할 때(진하게, 가운데정렬)
* <td> 데이터를 보여줄 때(일반글자, 왼쪽정렬)
      <td width="넓이" height="높이" background="바닥이미지" bgcolor="바닥색"
          align="수평정렬" valign="수직정렬" 
          colspan="합칠 칸의 수" rowspan="합칠행의 수">
          ^복잡한 모양의 테이블을 만들 때 사용하는 속성
* <thread>, <tbody>, <tfoot> 의미적인 용도 태그

1. 테이블 시작
<table><!--부모태그에 속성을 설정하면 설정된 속성은 자식으로 상속.-->
  <tr><!--자식/부모-->
    <td>데이터</td><!--자식-->
    <td>데이터</td>
  </tr>
  <tr>
    <td>데이터</td>
    <td>데이터</td>
  </tr>
</table>