html list

limchard·2023년 10월 29일
0

html

목록 보기
2/10

순서가 있는 list

<!-- ol 태그 : 순서있는 list(order list의 약자) : default로 1,2,3,4,..... 넘버링이 들어간다. -->
    <ol>
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>html</li>
        <li>JavaScript</li>
        <li>Ajax</li>    
    </ol>

<ol type="A"> <!-- A,B,C,D... 넘버링 -->
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

<ol type="a"> <!-- a,b,c,d... 넘버링 -->
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

<ol type="i"> <!-- i,ii,iii,iv... 넘버링 -->
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

<ol type="I"> <!-- I,II,III,IV,V... 넘버링 -->
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

<ol start="30"> <!-- 30부터 시작하는 넘버링 --> 
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

<ol start="30" reversed="reversed"> <!-- 30부터 거꾸로 내려오는 넘버링 --> 
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>


순서 없는 list

<!-- ul (순서없는 list) -->
    <ul>
        <h2>순서 없는 리스트(UnorderList)</h2>
        <li>미국</li>
        <li>베트남</li>
        <li>대만</li>
        <li>호주</li>
        <li>한국</li>
    </ul>

<ul type="circle">
        <h2>순서 없는 리스트(UnorderList)</h2>
        <li>미국</li>
        <li>베트남</li>
        <li>대만</li>
        <li>호주</li>
        <li>한국</li>
    </ul>

<ul type="square">
        <h2>순서 없는 리스트(UnorderList)</h2>
        <li>미국</li>
        <li>베트남</li>
        <li>대만</li>
        <li>호주</li>
        <li>한국</li>
    </ul>

<ul style="list-style: none;"> <!-- 제일 많이 쓴다 -->
        <h2>순서 없는 리스트(UnorderList)</h2>
        <li>미국</li>
        <li>베트남</li>
        <li>대만</li>
        <li>호주</li>
        <li>한국</li>
    </ul>


list에 list 주기 (#)

<!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>
        a{
            text-decoration: none;
        }

        li{
            list-style: none;
        }
        
        .main{
            float: left;
            margin-right: 50px;            
        }

        /* 제목 3개 */
        .main>a{
            color: blue;
            font-weight: bold;
            font-size: 1.2em;
            display: block;
            width: 180px;
            height: 30px;
        }

        .submenu{
            font-size: 12pt; 
            margin-top: 10px;
        }

        .submenu>li>a{
            display: block;
            width: 100px;
            height: 10px;
            color: orange;
        }

    </style>
</head>
<body>
    <div>
        <ul>
            <li class="main">
                <a href="#">7월 12일</a> <!-- #은 경로가 없다. 경로가 없다는 의미로 #을 기입해준다. -->
                <ul class="submenu">
                    <li>
                        <a href="../day0712/ex1_htmlTag.html">1번 예제</a>
                    </li>
                    <li>
                        <a href="../day0712/ex2_htmlTage.html">2번 예제</a>
                    </li>
                    <li>
                        <a href="../day0712/quiz.html">퀴즈</a>
                    </li>
                </ul>
            </li>
        </ul>

        <ul>
            <li class="main">
                <a href="#">7월 13일</a> <!-- #은 경로가 없다. 경로가 없다는 의미로 #을 기입해준다. -->
                <ul class="submenu">
                    <li>
                        <a href="../day0713/ex01_htmlTag.html">1번 예제</a>
                    </li>
                    <li>
                        <a href="../day0713/ex04_listCheese.html">4번 예제</a>
                    </li>
                    <li>
                        <a href="../day0713/ex06_cssClass.html">6번 예제</a>
                    </li>
                    <li>
                        <a href="../day0713/ex09_lottoball.html">9번 예제</a>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li class="main">
                <a href="#">7월 14일</a> <!-- #은 경로가 없다. 경로가 없다는 의미로 #을 기입해준다. -->
                <ul class="submenu">
                    <li>
                        <a href="../day0714/ex03_table.html">3번 예제</a>
                    </li>
                    <li>
                        <a href="../day0714/ex04_table.html">4번 예제</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

profile
java를 잡아...... 하... 이게 맞나...

0개의 댓글