[html] html 기본 문법 익히기_8. html 리스트 생성, 번호 지정, 정렬

0. html 리스트 생성

<!DOCTYPE html>
<html>

<body style="background-color: rgb(170, 134, 121);">

    <h2>넘버링되지 않은 HTML List</h2>
    <p>오늘 먹고 싶은 음식</p>
    <ul>
        <li>스파게티</li>
        <li>연어</li>
        <li>빵</li>
    </ul>
    <hr>
    <h2>넘버링된 HTML List</h2>
    <p>공부 순서</p>
    <ol>
        <li>재료역학 1단원 공식 정리</li>
        <li>재료역학 1단원 연습문제 풀기</li>
        <li>유체역학 1단원 공식 정리</li>
    </ol>
    <hr>
    <h2>하위 HTML List</h2>
    <p>자동차 고유변호 특징</p>
    <dl>
        <dt>차량번호</dt>
        <dd>- 차대번호 -00 형식</dd>
        <dd>- 특정 사건이 일어나면 뒤의 두 숫자가 바뀜 (ex 사고차)</dd>
        <dt>차대번호</dt>
        <dd>- 차량 고유의 번호</dd>
        <dd>- 차량 엔진룸, 앞유리 하단 등에 각인되어있음</dd>
    </dl>
    <hr>
</body>

</html>

- 넘버링되지 않는 리스트를 만들 때는, ul 태그의 하위로 li 태그를 사용한다.

- 넘버링된 리스트를 만들 때는, ol 태그의 하위로 li 태그를 사용한다.

- 리스트에 하위 리스트를 만들 때는, dl 태그의 하위 태그로 dt->dd 태그를 사용한다.

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

'컴퓨터 > Front (Html, JS)' 카테고리의 다른 글

[html] 코딩애플 HTML/CSS All-in-one 강의노트 : (1) brackets, HTML 기본 (0)	2021.11.15
[html] html 기본 문법 익히기_9. html 클래스 (0)	2021.10.17
[html] html 기본 문법 익히기_7. html div와 span (0)	2021.10.15
[html] html 기본 문법 익히기_6. html 에 데이터 테이블 (표) 셀 병합 (0)	2021.10.14
[html] html 기본 문법 익히기_5. html 에 데이터 테이블 (표) 추가, 크기조절 (0)	2021.10.13