[생활코딩] HTML 수업 - (6) 이미지 및 표 태그

01 Feb 2020

Reading time ~1 minute

이 포스트는 생활코딩 HTML 수업을 기반으로 작성한 글입니다.

주요 태그인 이미지 및 표 기능의 img 태그와 table 태그에 대하여 알아보겠습니다.

img 태그
- img 태그 적용 후
table 태그
- table 태그 적용 후
- table 태그 구조 및 병합 적용 후
결론

img 태그

img 태그는 image의 줄임말로 이미지를 표현할 때 사용합니다.

img 태그 적용 후

<html>
<body>
<img src="https://source.unsplash.com/1600x900/?code" height="300"
    alt="코드 이미지" title="코드 이미지">
</body>
</html>

코드 이미지

table 태그

table 태그는 말 그대로 표를 나타낼 때 사용합니다. tr은 table row의 약자로 행을 뜻하고 ,th는 table head의 약자로 표의 제목에 해당하는 칸을 의미합니다. td는 table data의 약자로 표의 한 칸을 의미합니다.

table 태그 적용 후

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2" style="text-align:center">
<tr>
    <th>이름</th><th>성별</th><th>주소</th><th>회비</th>
</tr>
<tr>
    <td>최진혁</td><td>남</td><td>청주</td><td>1000</td>
</tr>
<tr>
    <td>최유빈</td><td>여</td><td>청주</td><td>500</td>
</tr>
<tr>
    <td>합계</td><td></td><td></td><td>1500</td>
</tr>
</table>
</body>
</html>

이름	성별	주소	회비
최진혁	남	청주	1000
최유빈	여	청주	500
합계			1500

table 태그 구조 및 병합 적용 후

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2" style="text-align:center">
<thead>
    <tr>
        <th>이름</th><th>성별</th><th>주소</th><th>회비</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>최진혁</td><td>남</td><td rowspan="2">청주</td><td>1000</td>
    </tr>
    <tr>
        <td>최유빈</td><td>여</td><td>500</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="3">합계</td><td>1500</td>
    </tr>
</tfoot>
</table>
</body>
</html>

이름	성별	주소	회비
최진혁	남	청주	1000
최유빈	여	청주	500
합계			1500

결론

img 태그에 주로 사용되는 속성은 다음과 같습니다.
1) src - 이미지의 경로
2) width - 넓이, height - 높이
(width와 height 중 하나만 지정할 경우 원본이미지의 비율을 유지)
3) alt - 이미지가 없을 때 나타나는 대체텍스트
4) title - 마우스를 올렸을 때 나타나는 텍스트(툴팁)
일반적으로 table 태그아래 tr 태그와 td 태그로 표를 나타낼 수 있습니다.
표의 제목을 나타낼 때는 가운데 정렬과 굵은 글씨로 강조하는 th 태그로 td 태그와 구분하는 것이 좋습니다.
rowspan, colspan을 이용하여 표의 칸을 합칠 수 있고, border를 이용하여 테두리의 두께를 지정할 수 있습니다.
thead, tbody, tfoot 등을 이용하여 의미론적으로 구조를 만들어 주는 것이 표의 내용을 정보로서 전달하기 좋습니다.

HTML