728x90
반응형
목록 태그
- 순서 없는 목록 1
- 순서 없는 목록 2
- 순서 있는 목록1
- 순서 있는 목록2
설명 목
- 설명을 보좌해주는 목록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h3>순서 없는 목록</h3>
<!-- ul은 unordered list 즉, 순서 없는 목록이라는 뜻이다. -->
<ul>
<li>순서 없는 목록1</li>
<li>순서 없는 목록2</li>
<li>순서 없는 목록3</li>
</ul>
<h3>음료 목록</h3>
<ul>
<li>아메리카노</li>
<li>허브티</li>
</ul>
<h3>순서 있는 목록</h3>
<!-- ol은 ordered list 즉 순서 있는 목록이라는 뜻이다. -->
<ol>
<li>순서 있는 목록1</li>
<li>순서 있는 목록2</li>
<li>순서 있는 목록3</li>
</ol>
<h3>라면 끓이는 순서</h3>
<ol>
<li>물을 끓인다.</li>
<li>스프를 넣는다.</li>
<li>면을 넣는다.</li>
<li>5분 기다린다.</li>
</ol>
<h3>설명 목록</h3>
<!-- dl - description list 설명할 목록 -->
<!-- dt - define term 정의해야할 용어 -->
<!-- dd - describe description 부가설명 정의 -->
<dl>
<dt>HTML</dt>
<dd>- 웹 페이지 개발을 위한 마크업 언어</dd>
<dt>css</dt>
<dd>- 웹 페이지 디자인을 위한 언어</dd>
<dt>자바스크립트</dt>
<dd>- 웹 페이지를 사용자와 동적처리를 위한 언어</dd>
</dl>
</body>
</html>표 태그
셀 병합, 줄의 스타일, 유무 등 표를 자유롭게 만들 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
/* th {
border: 1px solid rgb(187, 216, 18);
}
td {
border: 1px solid rgb(91, 34, 164);
} */
</style>
</head>
<body>
<!-- 표 : table -->
<!-- 행 : tr -->
<!-- 셀 : td(데이터), th(열 제목) -->
<!-- thead : table head 의 약자, 제목이 들어가는 모든 tr 태그들-->
<!-- tbody : table body 의 약자, 데이터가 들어가는 모든 tr태그들 -->
<table>
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>별이</td>
<td>010-0000-0000</td>
<td>star@gmail.com</td>
</tr>
<tr>
<td>달이</td>
<td>010-0000-0000</td>
<td>moon@gmail.com</td>
</tr>
<tr>
<td>하늘이</td>
<td>010-0000-0000</td>
<td>sky@gmail.com</td>
</tr>
</tbody>
</table>
<br />
<table>
<thead>
<tr>
<th>학년</th>
<th>반</th>
<th>학생수</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1학년</td>
<td>1반</td>
<td>18명</td>
</tr>
<tr>
<!-- <td>1학년</td> -->
<td>2반</td>
<td>19명</td>
</tr>
<tr>
<!-- <td>1학년</td> -->
<td>3반</td>
<td>20명</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">합계</td>
<!-- <td></td> -->
<td>57</td>
</tr>
</tfoot>
</table>
</body>
</html>728x90
반응형
'HTML & CSS' 카테고리의 다른 글
| input요소의 주요 속성 (2) | 2023.10.12 |
|---|---|
| form 요소 (2) | 2023.10.12 |
| 의미에 맞는 태그 (2) | 2023.10.02 |
| HTML의 기본 구조, 요소, 속성 (2) | 2023.10.02 |
| 웹의 이해와 웹개발 라이프 사이클 (2) | 2023.10.02 |