본문 바로가기
TIL/HTML

순서가 있는 목록, 순서가 없는 목록 만들기

by 계발자jessie 2023. 7. 11.
반응형

순서가 없는 목록

  • beer
  • 김치
  • meat
  • milk

 

위에서 보이는 형태로 순서가 없는 목록을 만들기 위해서는 <ul> 이라는 태그를 이용해야 한다. ul은 unordered list 라는 뜻으로 목록이 출력되지만 순서가 출력되지 않는 목록을 의미한다. 

<ul>
    <li>beer</li>
    <li>김치</li>
    <li>meat</li>
    <li>milk</li>
</ul>

<ul> 태그 안에 목록으로 출력되고자 하는 내용을 넣는다. 그리고 그 내용을 각각 <li> 태그로 감싸주면 된다. <li> 태그로 감싸지 않는 경우 아래와 같이 표현된다.

 

    beer 김치 meat milk

 

<ul>태그로 감쌌지만 목록의 형태로 만들어지지 않는 모습을 확인할 수 있다. 

순서가 있는 목록

  1. beer
  2. 김치
  3. meat
  4. milk

 

위에서 처럼 숫자로 순서가 표시된 목록을 만들기 위해서는 <ol> 태그를 이용한다. ol이란 ordered list의 약자이다. 

 

<ol>
    <li>beer</li>
    <li>김치</li>
    <li>meat</li>
    <li>milk</li>
</ol>

 

<ol>태그를 작성하고 그 안에 위에서와 마찬가지로 <li> 태그로 감싸진 목록을 넣어준다. 이 때에도 <li> 태그를 작성하지 않으면 목록의 형태로 출력되지 않게된다. 

반응형

'TIL > HTML' 카테고리의 다른 글

의미는 없지만 기능은 존재하는 태그들  (0) 2023.07.18
input 태그와 함께하는 label 태그  (0) 2023.07.17
input 태그의 여러 속성들  (0) 2023.07.16
html 파일의 작성 규칙과 head  (0) 2023.07.15
img 태그와 src 속성  (0) 2023.07.14
a 태그와 속성들  (0) 2023.07.13

댓글