list-style-type Property


Home > Document > CSS > Classification > list-style-type

list-style-type Property

list-style-type Property는 순서가 없는 목록(, , )의 글머기 기호나 순서가 있는 목록(1, a, A, I, i)의 글머리 번호 등의 형태를 지정합니다. 목록 전체에 list-style-type을 지정하려면 UL이나 OL Tag에 지정하고, 각각의 목록에 다른 list-style-type을 지정하려면 LI Tag에 지정합니다. 자세한 사용법은 여기를 참조하시져.

  [표 보는 방법]
list-style-type Property
Value 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
Initial disc
Applies to elements with 'display: list-item'
Inherited yes
Percentages N/A
Media Visual
HTML Syntax { list-style-type: sType }
Scripting object.style.listStyleType [ = sType ]


위의 Value 값 중에 굵은 글씨체로 된 Keyword만 작동하고 나머지는 모두 disc ()로 보입니다. 아래의 Source code와 출력 결과를 참고하세요.
입력
    .
    .
    <body>
    <ul>
        <li style="list-style-type: disc;"><b>disc</b></li>
        <li style="list-style-type: circle;"><b>circle</b></li>
        <li style="list-style-type: square;"><b>square</b></li>
        <li style="list-style-type: none;"><b>none</b></li>
        <li style="list-style-type: decimal;"><b>decimal</b></li>
        <li style="list-style-type: lower-alpha;"><b>lower-alpha</b></li>
        <li style="list-style-type: upper-alpha;"><b>upper-alpha</b></li>
        <li style="list-style-type: lower-roman;"><b>lower-roman</b></li>
        <li style="list-style-type: upper-roman;"><b>upper-roman</b></li>
        <li style="list-style-type: decimal-leading-zero ;">decimal-leading-zero</li>
        <li style="list-style-type: lower-greek ;">lower-greek </li>
        <li style="list-style-type: lower-latin ;">lower-latin </li>
        <li style="list-style-type: upper-latin ;">upper-latin </li>
        <li style="list-style-type: hebrew ;">hebrew </li>
        <li style="list-style-type: armenian ;">armenian </li>
        <li style="list-style-type: georgian ;">georgian </li>
        <li style="list-style-type: cjk-ideographic ;">cjk-ideographic </li>
        <li style="list-style-type: hiragana ;">hiragana </li>
        <li style="list-style-type: katakana ;">katakana </li>
        <li style="list-style-type: hiragana-iroha ;">hiragana-iroha </li>
        <li style="list-style-type:  katakana-iroha ;"> katakana-iroha </li>
    </ul>
    </body>
    .
    .
출력결과
  • disc
  • circle
  • square
  • none
  • decimal
  • lower-alpha
  • upper-alpha
  • lower-roman
  • upper-roman
  • decimal-leading-zero
  • lower-greek
  • lower-latin
  • upper-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha




CSS Scripting
onMouseOver="this.style.listStyleType='lower-roman';"


List-Item 에 color 설정하기

List-Item에 color 를 설정한다는 뜻은 순서가 없는 리스트(UL : Unorderd List) 의 disc, circle, square나 순서가 있는 리스트 (OL : Ordered List) 등의 List-style-type 에 color 를 설정한다는 뜻입니다.

다음의 첫 번째 예제는 그냥 Inline 으로 지정하는 방법이고 두 번재 예제는 Class selector 를 사용하는 방법입니다. 두 가지를 비교해 보면 class로 지정하는 방법이 역시 편하다는 사실을 다시 한 번 알 수 있으리라 봅니다.

입력
<HTML>
    <HEAD>
        <TITLE>갈색 disc, 갈색 글씨</TITLE>
    <STYLE type="text/css">
    <!-- 
    .brown {color:brown;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <UL>
            <LI class="brown">갈색 disc, 갈색 글씨</LI>
        </UL>
    </BODY>
</HTML>
출력결과
  • 갈색 disc, 갈색 글씨


  • 출력 결과가 마음에 드십니까? 혹시 글씨는 검정색이고, 점만 갈색으로 나올 거라고 생각하신 분들은 없는지... 글씨는 다른 색으로 지정하고 싶다면 다음과 같이 줄바꿈이 일어나지 않는 SPAN Element를 사용합니다.

    입력
    <HTML>
        <HEAD>
            <TITLE>갈색 disc, 검정색 글씨</TITLE>
        <STYLE type="text/css">
        <!-- 
        .brown {color:brown;}
        .black {color:#000000;}
        -->
        </STYLE>
        </HEAD>
        <BODY>
            <UL>
                <LI class="brown"><SPAN class="black">갈색 disc, 검정색 글씨</SPAN></LI>
            </UL>
        </BODY>
    </HTML>
    
    출력결과
  • 갈색 disc, 검정색 글씨






  • 이 문서의 저작권은 www.cadvance.org 에 있습니다.

    Top
    Back
    New
    검색