[html/css] 목록 스타일 속성 꾸미기 / List-style-type

목록 스타일 속성 <List-style>

 

목록 태그 앞에 붙는 불릿이나 숫자의 모양을 바꿔주거나 들여쓰기를 제어 할  수 있다.

list-style 속성을 쓰면 type과 position을 한꺼번에 선언할 수 있다.  

---

<List-style-position>

 

목록 태그를 들여쓰기 혹은 내여쓰기하는 속성이다.

 

List-style-position    : 목록태그의 들여쓰기 부분
List-style-position: inside; (불릿이나 숫자를 안쪽으로 들여쓰기)
List-style-position: outside; (불릿이나 숫자를 바깥쪽으로 내여쓰기)

 

---

<List-style-type>

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

 

<ul>

List-style-type: disc (●)
List-style-type: circle (○)
List-style-type: square (■)
List-style-type: none (불릿 없음)

 

<ol>

List-style-type: demical (1로 시작하는 십진수. 1,2,3...)
List-style-type: demical-leading-zero (0으로 시작하는 십진수. 01,01,03...)
List-style-type: Lower-roman (로마 숫자 소문자. ⅱ,ⅷ, ⅺ...)
List-style-type: upper-roman (로마 숫자 대문자. Ⅰ,Ⅲ,Ⅵ...)
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 (조지 왕조 시대의 숫자)