-
목록을 만드는 태그
-
<ul>, <li>: 순서 없는 목록. 각 항목 앞에 불릿이 붙여짐
-
<ol>,<li>: 순서 목록. 숫자 혹은 a,b,c로 구분
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>1박 2일 가족 여행 코스</title>
</head>
<body>
<ul>
<li>1일차</li>
<ol type="a">
<li>해녀박물관</li>
<li>낚시체험</li>
</ol>
<li>2일차</li>
<ol type="a" start="3">
<li>용눈이오름</li>
<li>만장굴</li>
<li>카약체험</li>
</ol>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>1박 2일 가족 여행 코스</title>
</head>
<body>
<h1>관광 안내 전화</h1>
<p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.
</p>
<p>
1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.
<ul>
<li>일반전화: (국번없이) 1330</li>
<li>휴대전화: 064-1330</li>
</ul>
</p>
</body>
</html>
-
<dl>, <dt>, <dd>: 설명 목록
-
제목과 그에 대한 설명으로 이루어진 목록
-
하나의 <dt>에 여러 개의 <dd>값을 가질 수 있음
<dl>
<dt>
<dd>
<dd>
</dt>
</dl>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제주 올레</title>
<style>
dl {
line-height:25px; /* 줄 간격 */
}
</style>
</head>
<body>
<h1>제주 올레</h1>
<dl>
<dt>올레1코스</dt>
<dd>코스: 시흥초등학교</dd>
<dd>거리: 14.6km</dd>
<dd>난이도: 중</dd>
<dt>올레2코스</dt>
<dd>코스: 광치기 해변</dd>
<dd>거리: 14.5km</dd>
<dd>난이도: 중</dd>
</dl>
</body>
</html>
-
표를 만드는 태그
-
<table>: 표 전체
-
<tr>: 행
-
<td>: 셀 <th>: 제목 셀
-
<colspan>, <rowspan>: 열과 행을 합침
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
td {
padding:5px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<table>
<tr>
<th> 제목셀 </th>
<td> 1행 2열 </td>
<td> 1행 3열 </td>
</tr>
<tr>
<th> 제목셀 </th>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
th {
padding:15px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
tr > td:nth-child(odd) {
width:120px; /* 홀수번째 열의 너비 : 120px */
}
tr > td:nth-child(even) {
width:300px; /* 짝수번째 열의 너비 : 120px */
}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<td> </td>
<th>연락처</th>
<td> </td>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
'Learning > HTML&JavaScript' 카테고리의 다른 글
| 폼 관련 태그들 (0) | 2020.07.14 |
|---|---|
| 이미지와 하이퍼링크 (0) | 2020.07.14 |
| 표 제목(<caption>, <figure>, <figcaption>), 표 구조 정의(<thead>, <tbody>, <tfoot>), 열 스타일(<col>, <colgroup>) (0) | 2020.07.07 |
| <strong>, <br>, <q>, <q cite>, <mark>, <span>, <div>, <ruby>, <rt> (0) | 2020.07.07 |
| HTML 편집기 다운로드, 기본 문법, 이미지 및 특수기호 삽입, <hr>, <blockquote>, <pre>태그 (0) | 2020.07.07 |
