list-style-type

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

list-style-type 은 list-style 에서 항목의 "구분점" 모양만 지정할 수 있도록 특화되었습니다.

예제 1
list-style-type 개요
보기
list-style-type : disc
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
list-style : circle
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
list-style-type : square
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
list-style-type : decimal
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
list-style-type : lower-alpha
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
소스
<style type="text/css">
    .css_test {
        font-size : 20pt !important;
        margin : 0 0 25px 0;
    }
</style>

list-style-type : disc
<ul class="css_test" style="list-style-type:disc;">
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
</ul>

list-style : circle
<ul class="css_test" style="list-style-type:circle;">
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
</ul>

list-style-type : square
<ul class="css_test" style="list-style-type:square;">
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
</ul>

list-style-type : decimal
<ul class="css_test" style="list-style-type:decimal;">
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
</ul>

list-style-type : lower-alpha
<ul class="css_test" style="list-style-type:lower-alpha;">
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
</ul>
사용된 CSS (클릭시 보기) : font-sizelist-style-typemargin
설명
- list-style 에서 각 항목앞의 점의 모양만 설정할 수 있도록 특화된 속성입니다.
- 참고 : list-style
예제 2
실습 - 적용해 보기
보기
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
list-style-type :
list-style-type : disc
연구 1
list-style 항목이 아주 많다면 어떻게 될까 (항목 100개로 보기)
보기
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
list-style-type :
list-style-type : disc
+ 관련 CSS +