Brackets

<!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>

image.png

<!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: 글자색; }