메모
<b>, <i> 사용은 지양하기
inline style 사용하지 않기
<br> 여러 개 사용하지 않기
semantic 태그 사용하기 (큰 틀을 잡을 때 div말고 header, footer 등을 사용하기)
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 5px;
}
.headcol {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>큰제목</h1>
<h6>작은제목</h6>
<p>문단</p>
<!-- 줄바꿈 -->
<br />
<!-- em, strong은 음성 출력 시에도 억양으로 강조 -->
<i>이탤릭</i>
<em>이탤릭 강조</em>
<b>볼드</b>
<strong>볼드 강조</strong>
<!-- 가로선 -->
<hr />
<!-- 순서 리스트 -->
<ol>
<li>금상</li>
<li>은상</li>
<li>동상</li>
</ol>
<!-- 순서 없는 리스트 -->
<ul>
<li>상상</li>
<li>뮤티즌상</li>
<li>엄원상</li>
</ul>
<!-- 정의하는 리스트 -->
<dl>
<dt><dfn>동상</dfn></dt>
<dd>잘하면 받는다.</dd>
<dt>은상</dt>
<dd>더 잘하면 받는다.</dd>
<dt>금상</dt>
<dd>그것보다 더 잘하면 받는다.</dd>
</dl>
<hr />
<table>
<caption>
졸업프로젝트팀 명단
</caption>
<colgroup>
<col class="headcol" />
</colgroup>
<thead>
<tr>
<th>팀명</th>
<th>이름</th>
<th>학번</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">탁트리오</td>
<td>강지훈</td>
<td>2019XXXXX</td>
<td>버스를 잘탐</td>
</tr>
<tr>
<td>박형기</td>
<td>2019OOOOO</td>
<td>월 300받고 일함</td>
</tr>
<tr>
<td>황영탁</td>
<td>2019_____</td>
<td>히트곡 다수 보유</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>
Reference
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML] head 태그 (2) | 2024.02.04 |
|---|---|
| [HTML] Form 태그 (0) | 2024.02.01 |
| [HTML] 이미지 & 멀티미디어 태그 (0) | 2024.01.31 |
| [HTML] 영역 태그 (0) | 2024.01.31 |
| [HTML] VSCode Emmet (0) | 2024.01.30 |
