[생활코딩] HTML 수업 - (7) 입력 양식을 나타내는 태그
01 Feb 2020
Reading time ~1 minute
이 포스트는 생활코딩 HTML 수업을 기반으로 작성한 글입니다.
주요 태그인 입력 양식을 나타내는 form 태그에 대하여 알아보겠습니다.
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 등을 이용하여 의미론적으로 구조를 만들어 주는 것이 표의 내용을 정보로서 전달하기 좋습니다.