안녕하세요. 이번 시간에는 링크, 이미지, 테이블, 리스트에 관한 태그에 대해 알아보겠습니다.
링크
a 태그는 클릭 시 다른 페이지로 이동시켜주는 태그입니다. 속성은 href와 target이 있는데 href는 주소를 나타내고, target은 새 창을 어디에 띄울건지를 나타냅니다.
<a href="https://www.zerocho.com">링크</a>이미지
이미지는 이미지를 불러오는 태그입니다. 이미지는 안의 내용이 없기 때문에 닫는 태그가 없습니다. 속성은 이미지의 경로를 불러오는 src와 이미지의 경로가 잘못되었거나 파일이 깨졌을 때 나오는 메세지를 입력하는 alt가 있습니다. 그리고 width나 height 처럼 너비와 높이를 정해주어도 됩니다. 단위는 픽셀입니다.
<img src="http://www.gravatar.com/avatar/edc1de56da658ae0b919a2d2ee28e26c?s=32&d=retro" alt="정상 이미지" width="32" height="32" />
<img src="htp://www.naver.com/favicon.ico" alt="손상된 이미지" />테이블
테이블은 표를 표시하는 태그입니다. 테이블은 셀 하나 하나가 다 태그이기 때문에 간단한 테이블도 양이 좀 많습니다. 테이블의 제목은 caption 태그로 표시합니다. 표에는 여러 줄이 있죠? 첫 줄은 thead, 마지막 줄은 tfoot, 그 이외의 줄은 tbody로 묶어줍니다.
<table>
<caption>시간표</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>그 후 가로 한 줄은 tr 태그로 표시합니다. 칸 하나는 td 태그로 표시합니다. 제목 칸은 th 태그를 사용합니다. 시간표를 완성해보겠습니다. 결과는 아래에서 확인하세요. 참고로 td나 th는 colspan과 rowspan이라는 속성을 사용할 수 있습니다. colspan은 가로로 얼마만큼의 칸을 차지할 지를 나타내고, rowspan은 세로로 얼마만큼의 칸을 차지할 지를 나타냅니다. 셀 합치기 기능과 비슷합니다.
<table>
<caption>시간표</caption>
<thead>
<tr><td></td><th>월</th><th>화</th><th>수</th><th>목</th></tr>
</thead>
<tbody>
<tr><th>1</th><td>중급회계</td><td></td><td>중급회계</td><td></td></tr>
<tr><th>2</th><td>기업경제학</td><td>자료구조</td><td>기업경제학</td><td>자료구조</td></tr>
<tr><th>3</th><td></td><td rowspan="2">알고리즘</td><td></td><td rowspan="2">알고리즘</td></tr>
<tr><th>4</th></tr>
<tr><th>5</th></tr>
<tr><th>6</th><td></td><td>재무관리</td><td></td><td>재무관리</td></tr>
<tr><th>7</th><td rowspan="2">마케팅원론</td><td></td><td rowspan="2">마케팅원론</td></tr>
<tr><th>8</th></tr>
</tbody>
<tfoot>
<tr><td colspan="4">제 시간표입니다</td></tr>
</tfoot>
</table>리스트
리스트는 목록을 표시하는 태그입니다. 종류는 두 가지가 있는데 ul과 ol입니다. ul은 순서가 없는 리스트고, ol은 순서가 있는 리스트입니다. 그리고 리스트의 항목은 li 태그로 표시합니다.
<ul>
<li>Zero</li>
<li>Hero</li>
<li>Nero</li>
</ul>
<ol>
<li>Zero</li>
<li>Hero</li>
<li>Nero</li>
</ol>위의 태그들을 한 번에 보여드리겠습니다.
다음 시간에는 공간을 담당하는 태그들을 알아보겠습니다.
익명
