Css #13 - 목록 스타일 속성

목록 스타일 속성

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

list-style-type

ul의 불릿이나 ol의 숫자를 다양한 형태로 바꿀때 사용한다.
<ul>
- list-style-type : disc(●)
- list-style-type : cicle(○)
- 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, 02, 03,...)
- list-style-type : lower-roman(로마 숫자 소문자. i, ii, iii, iv, ...)
- list-style-type : upper-roman(로마 숫자 대문자. I, II, III, IV, ...)
- 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(조지 왕조 시대의 숫자)

list-style-position

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

<!-- 순서가 없는 목록 -->
 <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
 </ul>
 
 <!-- 순서가 있는 목록 -->
  <ol>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
  </ol>

/* css코드 */
/* 목록 스타일 속성 */
ul,ol{
    /* 전체 선택자로 인해 숨은 불릿과 숫자 안쪽으로 들여쓰기 */
    list-style-position: inside;
    margin-bottom: 30px;
}

ul{
    list-style-type: none;
    list-style-type: disc;
    list-style-type: circle;
    list-style-type: square;

}

ol{
    list-style-type: decimal;
    list-style-type: decimal-leading-zero;
    list-style-type: lower-roman;
    list-style-type: upper-roman;
    list-style-type: lower-alpha;
    list-style-type: upper-alpha;
}