티스토리 뷰

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 스타일을 적용을 연습해보세요. 참고사항으로 알고있다면 좋을 것 입니다.

반응형

'CSS' 카테고리의 다른 글

3일차_border-radius  (0) 2023.10.19
3일차_포지션과제이미지  (0) 2023.10.17
2일차_css필수요소암기  (0) 2023.10.14
2일차_이미지요소예제  (0) 2023.10.14
2일차_로고이미지파일 (헤더영역예제)  (0) 2023.10.14
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함