생활 웹디자인

list-style-type

토픽 생활 웹디자인 > 외양의 CSS > CSS Dictionary

Summary

목록에서 목록 항목 표시자(블릿이나 숫자)의 모양을 지정합니다.

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
기본값 ul요소일때는 disc, ol요소일때는 decimal
적용대상 display값이 list-item인 요소 (li 요소)
상속 상속됨
퍼센테이지 지정불가
미디어 Visual

Value

  • disc : 속이 찬 원형 블릿
  • circle : 속이 빈 원형 블릿
  • square : 속이찬 사각형 블릿
  • decimal : 1부터 시작하는 10진수
  • decimal-leading-zero : 01부터 시작하는 십진수
  • lower-roman : 로마숫자의 소문자
  • upper-roman : 로마숫자의 대문자
  • lower-greek : 고대 그리스문자의 소문자
  • lower-alpha : 알파벳의 소문자
  • lower-latin : 라틴어의 소문자
  • upper-alpha : 알파벳의 대문자
  • upper-latin : 라틴어의 대문자
  • hebrew : 헤브라이 숫자
  • armenian : 아르메니아 숫자
  • georgian : 그루지아 숫자
  • cjk-ideographic : 한자의 숫자
  • hiragana : 일본어의 히라가나
  • katakana : 일본어의 카타카나
  • hiragana-iroha : 일본어 히라가나의 '이로하'순
  • katakana-iroha : 일본어 카타카나의 '이로하'순
  • none : 지정하지 않는다.

Tip

  1. 이 속성은 display값이 list-item인 경우에만 유효합니다. 따라서 li의 display속성을 inline이나 block로 지정하게 되면 list-style-type의 속성이 무효화됩니다.
  2. 다음과 같이 사용할 수 있습니다.
    ol {
        list-style-type:decimal;
    }

Sample

 

 

댓글

댓글 본문
  1. cindy
    안녕하세요. 강의 감사하게 보고 있습니다^^
    한 가지 질문이 있는데요,

    list-style-type은 list 태그를 쓴 경우에 적용된다고 명시되어 있습니다.

    그런데 만약 <li>태그를 묶고 싶다면 <div>나 <span>을 적용해야하는데,
    그렇게 되면 속성을 inline이나 block로 지정하게 되어서 적용이 되지 않습니다.

    1)li를 속성 없이 묶거나, 2)list-style-type이 아닌 다른 대체할 수 있는 목록 항목 표시자 태그가 있나요?
  2. 김연지
    sample 부분 404에러 납니다~
  3. 푸른하늘
    12일차 공부 감사합니다
  4. 이주형
    정말 감사합니다~! 리체님~!^_^
  5. 지영
    한글 가. 나. 다.이렇게는 없나요?