CSS

ul, ol요소의 목록 스타일 적용법

풀문쌤 2023. 10. 14. 18:07
728x90
반응형

ul목록스타일은 기본적으로 ul에서는 사각, 타원, 빈타원으로 제공되며

ol요소의 목록스타일은 a,A,i,I,1이 제공됩니다.

 

단순히 html에서도 <ul type="square"> 혹은 <ol style="a">로 단순하게 적용시킬 수 있습니다만,

css에서는 다르게 작성을 해야하기때문에 이에 대해 확인하고 필요한 상황에 맞게 적용시켜 쓰시면 좋습니다.

 


 

css에서의 ol style적용할때는 아래와 같이 작성합니다.

 

1) 1,2,3 : decimal;

2) 01,02,03 : decimal-leading-zero;

3) A,B,C : upper-alpha;

4) a,b,c : lower-alpha;

5) I, II, III, IV : upper-roman;

6) i,ii,iii,iv : lower-roman;

7) none

 

 ul스타일은 동일한 명칭인 square(사각), circle(빈원형), dise(검은색원형) 으로 구분되므로 헷갈릴 부분이 없습니다.

ol요소를 위 css 스타일을 적용을 연습해보세요. 참고사항으로 알고있다면 좋을 것 입니다.

반응형