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, 검정색 글씨

Top

Back

New

검색