HTML 리스트 태그 목록 만들기 <ol>, <ul>, <li> 정리

HTML 문서 내에서 리스트를 만들고 목록화하는 <ol> <ul> <li> 태그에 대해서 정리해보겠습니다. 문서의 리스트 작성 외에도 메뉴 및 이미지 목록을 만들 때도 사용하며 쓰임새가 많은 태그입니다.

 

 

 

HTML 태그 정리표 보러가기

HTML 태그 정리표 HTML 주요 태그들 정리

 

넘버링 목록 작성에 쓰이는 <ol> 태그 

단순히 텍스트로 (1. 2.) 이런 식으로 넘버링을 할 수도 있는데, 이렇게 작성하면 브라우저는 단순 텍스트로 인식하지 리스트로 인식을 하게 되지 않습니다. 넘버링하여 목록화하고 싶다면, <ol> 태그를 사용하여야 합니다. 

<ol>과 </ol>에 <li> 태그에 작성할 항목을 넣어주시면 됩니다.

 

디스플레이되는 숫자 형식을 변경하는 type 및 start속성

<ol> 태그의 속성에 type 및  start를 작성하면 표시되는 숫자 형식을 변경하거나 start속성에 시작되는 숫자를 넣게 되면 해당 숫자부터 넘버링이 되도록 변경할 수 있습니다.

속성값	내용
type = "1"	숫자 (기본값)
type = "a"	영문 소문자
type = "A"	영문 대문자
type = "i"	로마 숫자 소문자
type = "I"	로마 숫자 대문자

 

  <ol>
    <li>첫 번째 항목
    	<ol start="3" type="i">
    		<li>첫 번째 항목 하위-1</li>
    		<li>첫 번째 항목 하위-2</li>
    	</ol>
    </li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

예제 결과

1. 첫 번째 항목
   3. 첫 번째 항목 하위-1
   4. 첫 번째 항목 하위-2
2. 두 번째 항목
3. 세 번째 항목

<li> 태그 안에 다시 <ol> 태그를 넣어주면 상위 <li> 태그의 하위 목록이 생성됩니다.

 

 

 

 

블릿 리스트(Bulleted list) 순서 없는 목록 <ul> 태그

<ol>과 다르게 넘버링하지 않고, 총알 모양의 블릿 기호로 표시되는 <ul> 태그가 있습니다. 사용법은 <ol> 태그와 동이랗게 <ul>로 열리는 태그와 닫히는 </ul> 태그 사이에 <li> 태그를 넣어주면 됩니다. 웹문서 메뉴를 만들거나 이미지 리스트를 만들 때 <ul> 태그를 많이 사용합니다. 추 후에, CSS까지 정리가 되면 메뉴 제작을 정리해서 올려보도록 하겠습니다.