css-목록 스타일 속성

쁘띠경·2024년 6월 11일

css

목록 보기
12/33

목록 스타일 속성

 --------------------------
 목록태그 앞에 붙는 블릿이나 숫자의 모양을 바꿔주거나 들여쓰기를 제어할 수 있다. 
list-style속성을 쓰면 list-style-type과 list-style-position을 한꺼번에 선언가능. 

list- style-type

 -------------------
 ul의 블릿이나 ol의 숫자를 다양한 형태로 바꿀때 사용된다.



 <ul>
    -list-stylr-type: disc(●);
    -list-stylr-type: circle(○);
    -list-stylr-type: square(■);
    -list-stylr-type: none(불릿없음);




<ol>
    -list-style-type: decimal; (1로 시작하는 십진수. 1,2,3,,,,)
    -list-style-type: decimal-leading-zero; (앞에 0이 붙는 십진수 01,02,03,,,,)
    -list-style-type: lower-roman; (로마 숫자 소문자. i, ii, iii)
    -list-style-type: upper-roman; (로마 숫자 대문자. I, II, III)
    -list-style-type: lower-alpha; 또는 lower-latin(알파벳 소문자 a, b, c)
    -list-style-type: upper-alpha; 또는 upper-latin(알파벳 대문자 A, B, C)
    -list-style-type: armenian; (아르매니아 숫자)
    -list-style-type: georgian; (조지 왕조 시대의 숫자 an, ban, gan,,,,,)

 

list-style-position

 ---------------------
 목록태그의 들여쓰기 부분. 


 -list-style-position : inside; 불릿이나 숫자를 안쪽으로 들여씀.
 -list-style-position : outside; 불릿이나 숫자를 바깥쪽으로 내어씀.
 
 

profile
안녕하세요 ! 발전을 위해 매일 도전하는 퍼블리셔 류영경입니다.

0개의 댓글