HTML/CSS UL, OL을 사용해 보자

HTML/CSS UL, OL

 

 

HTML에서 리스트를 작성하기 위해 사용되는 태그들이 있다.

바로 UL / OL / DL등이 그것인데, 각각 다음과 같은 의미를 가지고 있다.

 

Unordered List (정렬되지 않은 목록)

Ordered List (정렬된 목록)

Description/Defined List (서술(정의) 목록) 

 

Unordered List는 목록이 다음과 같이 보여진다. 목록은 <li> 태그 안에 정해주어야 한다.

 

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ul>

• List 1
• List 2
• List 3

만약 CSS 속성의 list-style-type 항목을 circle로 설정해 주면 이렇게 보인다.

• List 1
• List 2
• List 3

CSS를 사용해서 원하는 모양으로 바꾸어 주면 되고, 만약 원하지 않으면  해당 속성을 none으로 설정해 주고 내가 원하는 모양으로 스타일링을 해주면 된다.

 

Ordered List는 목록 앞에 도형 대신 숫자가 들어간다. <ul>과 마찬가지로 <li>를 사용해 항목을 정해준다.

<ol>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ol>

1. List 1
2. List 2
3. List 3

물론, ol에서도 list-style-type 항목을 이용해 앞의 숫자를 도형이나 없음으로 설정할 수도 있다. 하지만 보다 효율적인 코드 작성을 위해 상황에 맞는 태그를 사용하도록 한다. 예를 들어 이렇게 ol을 사용해 코드를 작성했다면 나와 함께 일하는 다른 개발자가 이 코드를 보았을 때, 이 목록은 순서가 표시되어야 한다는 것을 인지할 수 있을 것이다.

 

ol 태그에서는 type 과 start설정을 통해서 넘버링의 스타일을 변경할 수 있다. 다음과 같이 적용할 수 있다.

<ol type="A" start=2></ol> 
<!--
B.List 1
C.List 2
D.List 3
-->
<ol type="a" start=5></ol> 
<!--
e.List 1
f.List 2
g.List 3
-->
<ol type="i"></ol>
<!--
i.List 1
ii.List 2
iii.List 3
-->
<ol type="I"></ol>
<!--
I.List 1
II.List 2
III.List 3
-->
<ol type="1"></ol>
<!--
1.List 1
2.List 2
3.List 3
-->

 

더 자세한 내용은 다음 동영상에서 확인할 수 있다.