CSS 목록

    2018-03-20 12:53:14 작성

    list-style

    list-style 속성은 <ul>, <ol> 요소의 스타일을 지정합니다.

    list-style 속성
    속성 설명
    list-style-type 항목의 마커의 유형을 지정합니다.
    list-style-position 항목의 마커의 위치를 지정합니다.
    list-style-image 항목의 마커를 이미지로 지정
    list-style 목록의 속성을 일괄 적용할때 사용합니다.


    list-style-type

    list-style-type: value|initial|inherit;

    항목의 마커의 유형을 지정합니다.

    ul 목록 타입
    disc
    • <ul> 기본값
    • 리스트 아이템
    circle
    • 리스트 아이템
    • 리스트 아이템
    square
    • 리스트 아이템
    • 리스트 아이템
    none
    • 리스트 아이템
    • 리스트 아이템

    ol 목록 타입
    decimal
    1. <ol> 기본값
    2. 리스트 아이템
    decimal-leading-zero
    1. 리스트 아이템
    2. 리스트 아이템
    lower-alpha
    1. 리스트 아이템
    2. 리스트 아이템
    upper-alpha
    1. 리스트 아이템
    2. 리스트 아이템
    lower-roman
    1. 리스트 아이템
    2. 리스트 아이템
    upper-roman
    1. 리스트 아이템
    2. 리스트 아이템
    기타 속성
    1. 리스트 아이템
    2. 리스트 아이템

    <ul> 요소에도 ol 목록 타입의 값을 지정할 수 있지만, 이렇게 해서는 안됩니다.



    list-style-position

    list-style-position: inside|outside|initial|inherit;

    항목의 마커의 위치를 지정합니다.

    outside
    • 기본값, 마커를 콘텐츠 왼쪽에 표시
    • 리스트 아이템
    inside
    • 마커를 콘텐츠 시작부분에 위치(들여쓰기)
    • 리스트 아이템


    list-style-image

    list-style-image: none|url|initial|inherit;

    항목의 마커를 이미지로 지정합니다.
    url 지정시 list-style-type 속성은 무시됩니다.

    none
    • 기본값, list-style-type지정 마커로 표시
    • 리스트 아이템
    url
    • 마커를 이미지로 표시
    • 리스트 아이템


    list-style

    list-style: list-style-type list-style-position list-style-image|initial|inherit;

    목록의 속성을 일괄 적용할때 사용합니다.
    각 항목 생략시 기본값이 적용됩니다.