HTML : 목록을 나타내는 <ul>, <ol>, <li>

HTML : 목록을 나타내는 <ul>, <ol>, <li>

HTML : 목록을 나타내는 <ul>, <ol>, <li>

---

 

 

<ul> : Unordered List 

---

• 비정렬 목록
• 순서 없이 아이템을 나열할 때 사용한다. ex: 메뉴
• 요소에 중첩되어 사용할 수 있다.
• <ol>과 섞어서 사용할 수 있다.

---

 

 

 

예제 : 비정렬 목록 - 순서가 없이 아이템을 나열할 때 사용

---

• 첫번째 목록
• 두번째 목록
• 세번째 목록

• 비정렬 목록
• 순서가 없이 아이템을 나열할때 사용 ex:메뉴

<ul>
	<li>비정렬 목록</li>
	<li>순서가 없이 아이템을 나열할때 사용 ex:메뉴</li>
</ul>

 

 

---

 

 

 

예제 : <ol>과 섞어서 사용할 수 있다.

---

1. Nestion
• 리스트

    <ol>
        <li>Nestion</li>
        <ul>
            <li>리스트</li>
        </ul>
    </ol>

 

 

---

 

 

 

<ol> : Ordered List

---

1. 정렬하는 목록
2. 각각 숫자를 갖고 있다. ex : 순위표, 레시피 등 

---

 

 

예제 : 정렬할 때 사용하는 목록

---

1. 정렬 목록
2. 각각 숫자를 갖고 있음 ex: 순위표. 레시피

    <ol>
        <li>정렬 목록</li>
        <li>각각 숫자를 갖고 있음 ex: 순위표. 레시피</li>
    </ol>

 

 

---

 

 

 

예제 : reversed 내부의 항목을 역순으로 배열할 때 사용

---

1. 정렬 목록
2. 각각 숫자를 갖고 있음 ex: 순위표. 레시피

    <ol reversed>
        <li>정렬 목록</li>
        <li>각각 숫자를 갖고 있음 ex: 순위표. 레시피</li>
    </ol>

 

 

---

 

 

예제 : start 항목을 셀 때 시작하는 순서 start = "5"면 다섯 번째부터 시작한다.

---

5. a
6. b

    <ol start="5">
        <li>a</li>
        <li>b</li>
    </ol>

 

 

---

 

 

 

예제 : type 항목을 셀 때 어떤 유형으로 할지 선택할 때 사용 

---

1. a 는 소문자 알파벳

1. A 는 대문자 알파벳

1. i 는 소문자 로마 숫자,

1. I 는 대문자 로마 숫자,

1. 1 는 숫자(기본값)

1. a 는 소문자 알파벳

    <ol type="a">
        <li>a 는 소문자 알파벳</li>
    </ol>
    <ol type="A">
        <li>A 는 대문자 알파벳</li>
    </ol>
    <ol type="i">
        <li>i 는 소문자 로마 숫자,</li>
    </ol>
    <ol type="I">
        <li>I 는 대문자 로마 숫자,</li>
    </ol>
    <ol type="1">
        <li>1 는 숫자(기본값)</li>
    </ol>
    <ol type="a">
        <li>a 는 소문자 알파벳</li>
    </ol>

 

 

---

 

 

 

<li> : List Item

---

• 상단의 목록 내의 내용을 나타낼 때 사용

---

 

 

예제 : value  - 시작하는 숫자를 지정할 수 있음 

---

• <li>에 value를 주어 시작하는 숫자를 지정하는 것보단 <ol>에 주는 게 더 가독성 좋다.

3. 3
4. 번부터 시작해

    <ol>
        <li value="3">3</li>
        <li>번부터 시작해</li>
    </ol>