<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>순서목록</title>
</head>
<body>
<h2>1.순서목록(ordered List, List item)</h2>
<ol>
<li>
<h3>아침루틴</h3>
<ol type="a">
<li>세수하기</li>
<li>밥먹기</li>
<li>옷입기</li>
<li>신발신기</li>
<li>출발하기</li>
</ol>
</li>
<li> 점심루틴
<ol type="a" start="6"> // start는 시작하고 싶은 위치 지정
<li value="1">점심먹기</li> // value는 typeㅇ의 순서 조정
<li value="7">간식먹기</li>
<li>산책하기</li>
<li>낮잠자기</li>
<li>정리하기</li>
</ol>
</li>
</ol>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>순서목록 예제</title>
</head>
<body>
<!--ol>li{HTML}+li{CSS}>ol>li{ex$}*3^^li>{Javascript}+ol>li*4-->
<ol start="3">
<li> HTML </li>
<li> CSS
<ol type="i">
<li value="6">ex1</li>
<li value="5">ex2</li>
<li value="4">ex3</li>
</ol>
</li>
<li style="font-weight: bold"> Javascript
<!--<strong>Javascript</strong>--> // 이렇게 글자를 strong으로 감싸도 굵게 변함
<ol type="a" start="10" style="font-weight: 100">
<li>Node.js</li>
<li>Express</li>
<li>React</li>
<li>Vue.js</li>
</ol>
</li>
</ol>
<hr>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>목록</title>
</head>
<body>
<h2>2. 목록(unordered List, List item)</h2>
<a href="index.html">처음으로</a>
<!--ul>lu*3>ul>li*4-->
<ul type="square">
<li>국내 여행 준비물 리스트
<ul>
<li>배낭</li>
<li>신분증</li>
<li>간식</li>
<li>친구</li>
</ul>
</li>
<li>해외 여행 준비물 리스트
<ul>
<li>돈</li>
<li>여권</li>
<li>신분증</li>
<li>옷</li>
</ul>
</li>
<li type="circle">방콕 준비물 리스트
<ul>
<li type="disc">폰</li>
<li type="none">잠옷</li>
<li type="disc">충전기</li>
<li>와이파이</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>스타웍스 메뉴판</title>
</head>
<body>
<a href="index.html">처음으로</a>
<h2>스타웍스 메뉴판</h2>
<ul type="square">
<li><h3>아메리카노</h3></li>
<li><h3>라테</h3></li>
<li type="circle"><h3>카푸치노</h3>
<ul>
<li><h4>진한맛</h4></li>
<li type="disc"><h4>연한맛</h4></li>
<li><h4>신맛</h4>
<ol type="1">
<li>산미 강</li>
<li>산미 중</li>
<li>산미 약</li>
</ol>
</li>
</ul>
</li>
<li><h3>스무디</h3></li>
</ul>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>정의 List</title>
</head>
<body>
<a href="index.html">처음으로</a>
<h2>3. 정의List dl, dt, dd</h2>
<!-- dl>dt+dd+dd^dt+dd*2-->
<hr>
<dl>
<dt>정의 리스트란</dt>
<dd>정의 리스트는 용어 정의와 같이 특정한 내용에 대한 정의를 구성하는 태그이고,<br>
dt 태그에는 정의 리스트의 제목을 기술하고 <br>
dd 태그에는 제목에 맞는 구체적인 내용을 기술한다
</dd>
<hr>
<dt>설명 리스트1</dt>
<dd>디테일1</dd>
<dd>디테일2</dd>
<dt>설명 리스트2</dt>
<dd>디테일1</dd>
<dt>설명 리스트3</dt>
</dl>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>테이블(표)</title>
<style>
table{
border-collapse: collapse;
}
tr{
text-align: center;
}
th{
background-color: darksalmon;
color: ghostwhite;
}
th,td{
padding: 5px;
width: 20%;
}
</style>
<script></script>
</head>
<body>
<a href="index.html">처음으로</a>
<h2>4. 테이블(표)</h2>
<table border="3" align="center" width="500">
<tr>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
<tr align="center">
<td rowspan="2">국</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3" style="background-color: lightskyblue">면</td>
<td>고기</td>
</tr>
<tr align="center">
<td>5000</td>
<td>6000</td>
<td>4500</td>
<td>10000</td>
<td>30000</td>
</tr>
</table>
</body></html>
th는 자동으로 가운데 정렬 + 굵기 td는 기본 css 선택자 활용 선택자{ background-color:배경색; -> ;필수 color: 글자색; }