HTML 기초 2일차 -2(리스트 태그)

이번에는 리스트태그이다.

 

 

번호 없는 리스트

[ul, /ul] [li, /li] (Unordered list)

• <ul>태그 안에 <li> 태그를 사용하여 각 항목을 표시함
• 순서가 없는 목록은 각 항목 앞에 작은 원이나 사각형등 불릿(bullet)이 붙는다

[예시]

<ul>
  <li>아메리카노</li>
  <li>카페라떼</li>
  <li>핫초코</li>
  <li>차</li>
  <ul>
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
  </ul>
</ul>

위의 리스트태그를 실행 시켰을 때 나타나는 결과

[질문해야할 것]

사실 여기에서 빠뜨린 거 한가지는 '꽉찬 동그라미와 안이 텅 빈 동그라미를 어떻게 구분하여 코딩하나?' 인데 선생님께 질문을 안했다... 다음 시간에 질문해야되겠다.(내 예상엔 들여쓰기 차이인듯)

 

번호가 있는 리스트

 

[ol, /ol] [li, /li] : Ordered list

• ol태그는 순서가 있는 목록을 만들 때 사용된다.
•  ol 태그 안에 있는 li태그를 사용하면 각 항목을 표시하고 각 항목 앞에 순서가 붙는다.

type 속성을 활용하기

• ol태그안에 type속성을 활용하면 숫자의 종류를 다양하게 바꿀 수 있다.

type 속성값들을 사용하면 어떻게 출력되는지 보여준다

 

[예시]

ol 태그와 type 속성을 활용한 것이다.

 

<ol>

    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

 

 

위 코드를 실행시키면 나오는 결과