[HTML] 나열되는 요소들 ul, ol, li

나열되는 요소들

- ul

• unordered list

순서가 상관없는 리스트

<ul>
  <li>사과</li>
  <li>포도</li>
  <li>딸기</li>
</ul>

과일의 목록처럼 순서가 의미없을 때 사용

---

- ol

• ordered list

정렬된 리스트

<ol>
  <li>알파</li>
  <li>베타</li>
  <li>감마</li>
</ol>

그리스 알파벳처럼 순서가 의미 있을 때 사용

중요한 것은 ul, ol 태그의 1촌 자식은 오직 li만 가능하다

<ol type="A" start="3">
  <li>재료 준비</li>
    <ul>
      <li>밥</li>
      <li>계란</li>
      <li>파</li>
      <li>간장</li>
    </ul>
  <li>파를 기름에 볶기</li>
  <li>밥 넣고 볶기</li>
  <li>계란을 넣고 스크램블</li>
  <li>간장을 넣고 마저 볶아 완성</li>
</ol>

---

• 위에는 ol태그의 type과 start를 적용 안 시켰을 경우

---

• 위에는 ol태그의 type과 start를 적용 시켰을 경우

---

용어와 정의 나열하기 dl, dt, dd

용어

정의

1:1 또는 n:n 가능하다.

<dl>
  <dt>프로그래밍</dt>
  <dd>컴퓨터 프로그램을 작성하는 일</dd>

  <dt>넓이</dt>
  <dt>광</dt>
  <dt>면적</dt>
  <dd>일정한 평면에 걸쳐 있는 공간이나 범위의 크기</dd>

  <dt>사과</dt>
  <dd>사과나무의 열매</dd>
  <dd>자기의 잘못을 인정하고 용서를 빎</dd>
</dl>

위 처럼 용어와 정의를 나타낼 수 있다. (+위에는 css가 더해졌다.)

---

• 참조 : 제대로 파는 HTML & CSS - by 얄코