자신의 일은 스스로하자

[HTML] #4 HTML 목록 태그 [스마트인재개발원] 본문

HTML, CSS

[HTML] #4 HTML 목록 태그 [스마트인재개발원]

힐파르 사막 삼계탕 2021. 7. 5. 02:47
728x90

 

목록 태그

웹 페이지의 내비게이션 메뉴를 만들 때 목록 태그를 사용합니다.

 

기본 목록

<ul>

-> 순서가 없는 목록 태그입니다.

<ol>

-> 순서가 있는 목록 태그입니다.

<li>

-> 목록의 요소를 나타냅니다.

<body>
    <h3>ol 태그</h3>
    <ol>
        <li>red</li>
        <li>blue</li>
        <li>yellow</li>
    </ol>
</body>

<body>
    <h3>ul 태그</h3>
    <ul>
        <li>red</li>
        <li>blue</li>
        <li>yellow</li>
    </ul>
</body>

위 코드들를 실행하면 아래 사진처럼 출력돼 ol태그와 ul태그의 차이를 알 수 있습니다.

중첩해서 목록

<body>
    <ul>
        <li>Color
            <ol>
                <li>red</li>
                <li>blue</li>
                <li>yellow</li>
            </ol>
        </li>
        <li>Fruit
            <ul>
                <li>apple</li>
                <li>peach</li>
                <li>grape</li>
            </ul>
        </li>
    </ul>
</body>

중첩해서 목록을 만들 때는 li태그 안에 목록 태그를 입력하면 아래 사진처럼 출력됩니다.

 

 

정의 목록

: 정의 목록은 특정 용어와 그 정의를 표현할 때 사용하는 태그입니다.

 

<dl>

-> 정의 목록 태그입니다.

<dt>

-> 정의 용어 태그입니다.

<dd>

-> 정의 설명 태그입니다.

<body>
    <dl>
        <bt>Color</bt>
        <dd>red</dd>
        <dd>blue</dd>
        <dd>yellow</dd>

        <bt>Fruit</bt>
        <dd>apple</dd>
        <dd>peach</dd>
        <dd>grape</dd>
    </dl>
</body>

위 코드를 실행하면 아래 사진처럼 출력됩니다.

웹 표준에 따르면 기본 목록과 정의 목록의 사용 용도가 다르지만 실제 개발할 때는 용도 구분 없이 사용합니다.

 

 

스마트인재개발원에서 진행된 수업입니다.

http://www.smhrd.or.kr

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

728x90
저작자표시 비영리 변경금지

'HTML, CSS' 카테고리의 다른 글

[HTML] #6 HTML 이미지 태그 [광주인공지능학원]  (0) 2021.07.12
[HTML] #5 HTML 테이블 태그 [광주인공지능학원]  (0) 2021.07.12
[HTML] #3_2 HTML 글자 태그 [스마트인재개발원]  (0) 2021.07.05
[HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원]  (0) 2021.06.27
[HTML] #2 Visual Studio Code / HTML 페이지 생성/ 페이지 작성/ 페이지 실행[스마트인재개발원]  (0) 2021.06.21
'HTML, CSS' Related Articles more