본문 바로가기
html

<ol> <ul>

글: 곰양이 2023. 7. 7.

ol (ordered list) 순서가 매겨져있는 list

ul (unordered list) 안매겨져있는 list !

 

는 쉬운데 헷갈리는 경우들이 종종 있는데  까먹지 않기 위해 적어두기

 

☝ Tip :   li들끼리 섞었을 때 이상해지면 ol 인것만 기억하면 된다!

 

 

 

 

 

실무사용예시를 보자

 

▲ 순서가 상관없으니 ul
▲ step 은 순서 상관있으니 ol
▲ 왼쪽의 메뉴는 넘버링이 되어있기 떄문에 ol을 사용했다. 이때 오른쪽에 슬라이드를 묶는 list는 ol일까 ul일까? 섞여도 되니까 ul인가? 아니 왼쪽과 짝지어져있기 때문에 ol을 사용하기로 하였다.

 

▲ 메인의 각 게시글 미리 보여주는 섹션이 있었는데 이것들도 각 날짜와 순서를 가지고 있으니 ol을 사용하였다.

 

 

 그럼 날짜와 순서를 가지면 무조건 ol을 사용하는걸까??? 답은 No여요

 

▲ 의외였던거슨 메일함은 날짜별이기때문에 ol일줄 알았는데 ul이었다......... 왜..?
▲ 아마 오른쪽에 필터링되는 기능이 있어서 li들이 섞일 수 있기때문에 ul를 사용한 듯 하다.

 

게시판류는 특정 날짜를 다 가지고 있기 때문에 무조건 ol이라고 생각했는데,

post 같이 관리자에 의해 순서를 변경할 수 있는 게시판이면 ul으로 해야겠다.

 

 

 

결론: 

1. li끼리 섞었을때 이상하면 ol을 사용한다. 반대로 이상하지 않다면 ul을 사용한다.

2. ol이어도 특정기능으로 인해 섞이게 된다면 ul을 사용하여도 된다.

'html' 카테고리의 다른 글

강조 태그 <b> <em> <i> <strong>  (0) 2023.07.05
h태그  (0) 2023.06.15
section article  (0) 2023.05.25