3일차 1-1 html list 관련

list와 관련된 태그들
(1) ol 태그(= ordered list)
(2) ul 태그(= unordered list)
(3) li 태그(= list)

1. ol tag

<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>

순서가 있는 list tag

1. a
2. b
3. c

2. ul tag

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

순서가 없는 list tag

• A
• B
• C

3. 리스트와 이미지

list 내에서 이미지 삽입 가능
이미지 파일이 수업 폴더 내에 있어 실행결과 없이 코드만 작성

<ul>
  <li>
      아메리카노  <br />
    <img src="americano.jpg" alt="americano"  width="100" height="100">
      에스프레소에 물을 넣어 연하게 마시는 커피
  </li>
</ul>

4. 중복 리스트

list tag에서 ol, ul tag들 상관 없이 중복 사용이 가능하다.

<ul>
  <li>상위 리스트 1</li>
    <ul>
      <li>하위 리스트1-1</li>
        <ol>
          <li>더 하위리스트 a</li>
          <li>더 하위리스트 b</li>
          <li>더 하위리스트 c</li>
        </ol>
      <li>하위 리스트1-2</li>
      <li>하위 리스트1-3</li>
    </ul>
  <li>상위 리스트 2</li>
    <ol>
      <li>하위 리스트2-1</li>
      <li>하위 리스트2-2</li>
      <li>하위 리스트2-3</li>
    </ol>
  <li>상위 리스트 3</li>
</ul>

• 상위 리스트 1
• 하위 리스트1-1

1. 더 하위리스트 a
2. 더 하위리스트 b
3. 더 하위리스트 c

1. 하위 리스트2-1
2. 하위 리스트2-2
3. 하위 리스트2-3

li tag가 왜 ul와 ol안에서 사용되는지 몰랐는데 이번 수업을 들으면서 하위 태그임을 배웠다.