본문 바로가기

IT개발 과정 [취성패 학원]/Frontend

[HTML]02. 목록관련태그

<!DOCTYPE html>
<html>
    <head>
        <title>목록 관련 태그</title>
    </head>

    <body>

        <li>목록1</li>
        <li>목록2</li>

        <h1>ul : 순서 없는 목록 태그</h1>
        <ul>
            <li>HTML
                <ul>
                    <li>글자관련</li>
                    <li>목록관련</li>
                </ul>
            </li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuary</li>
        </ul>
        <!--불릿(bullet)기호 : 채워진원, 빈원, 네모난거.. 변경 가능 => CSS시간에-->

        <hr>

        <h1>ol : 순서 있는 목록 태그</h1>

        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuary</li>
        </ol>
        <!--순서 있는 목록 태그는 기본적으로 1부터 시작하는 숫자값-->
        <br>

        <!--type속성을 이용해서 변경 가능(속성값 : 1(기본값), A, a, i, I)-->
        <ol type="I">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuary</li>
        </ol>

        <br>

        <!--start속성을 이용해서 시작값 변경 가능-->
        <ol start="5" type="a">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuary</li>
        </ol>

        <br>

        <!--reversed 속성을 통해 역순으로 표기 (속성값 제시 안함)-->
        <ol reversed>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuary</li>
        </ol>

        <br>
        <hr>

        <hl>d1 : 설명과 관련된 목록 태그</hl>

        <dl>
            <dt>이곳은 제목을 작성하는 곳</dt>
            <dd>여기에 해당 설명을 작성하는 곳</dd>
            <dd>여러줄을 작성할 수 있다.</dd>

            <dt>또 다른 제목 작성 가능</dt>
            <dd>설명도 마찬가지...</dd>

        </dl>


    </body>






</html>

결과물 !!

'IT개발 과정 [취성패 학원] > Frontend' 카테고리의 다른 글

[HTML]03. 표관련태그  (0) 2021.03.31
[HTML] 01. 글자관련태그  (0) 2021.03.31