CSS 리스트 관련 스타일

<목차로 돌아가기>

list 스타일

CSS리스트 속성은 아래와 같은 일을 할 수 있습니다.

- 지정되어 있는 순서목록 이외의 다른 순서목록을 지정할 수 있습니다.

- 지정되어 있는 비순서목록 이외의 다른 비순서목록을 지정할 수 있습니다.

- 이미지를 목록으로 지정할 수 있습니다.

리스트는 두가지 스타일이 있는데 하나는 1, 2, 3과 같은 순서를 표시하는 리스트이고

다른 하나는 ●, ■ 와 같이 순서가 없는 리스트 목록 입니다.

속성	설명	값
list-style-type	글머리표 종류	none, disc, circle, square,  lower-roman, upper-roman,  decimal, lower-alpha, upper-alpha
list-style-image	글머리표 그림	url(파일명)
list-style-position	글머리표의 위치	inside(리스트 상자 바깥쪽 배치),  outside(안쪽 배치)

리스트 속성 지정하기

아래의 예제와 같이 리스트 속성을 지정할 수 있습니다.

Example

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

리스트 li 속성을 그림으로 변경하기

특별한 이미지를 마커로 지정하고 싶다면. 아래와같이 그림을 지정해서 사용하면 됩니다.

Example

ul {
   list-style-image: url('sqpurple.gif');
}

위의 예제는 모든 브라우저에서 동일하게 표현되지 않습니다. IE와 Opera는 Firefox, Chrome, Safari 보다 조금 더 크게 표시됩니다. 만약 동일하게 표시하고 싶다면 아래의 설명을 따라하면 됩니다.

이미지로 지정하다보면 크기를 조절하거나 이미지르 조절하고 싶을때가 있습니다. 아래와같이 사용합시다.

Example

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

위처럼 구구절절하게 변경하기 귀찮을때는 한줄로 줄여서 넣을 수도 있습니다.

Example

ul {
    list-style: square url("sqpurple.gif");
}

다른 예제입니다.

Example

<ul style="list-style-type=upper-alpha">

    <li>테스트1

    <li>테스트2

    <li>테스트3

</ul>

<ul style="list-style-image:url(팽귄.jpg)">

    <li>테스트1

    <li>테스트2

    <li>테스트3

</ul>

<ul style="list-style-position=inside">

    <li>테스트1

    <li>테스트2

    <li>테스트3

</ul>

<ul style="list-style-position=outside">

    <li>테스트1

    <li>테스트2

    <li>테스트3

</ul>

 마도요.zip

기타

마커 여러가지 종류 알아보기

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow
list-style-type	Specifies the type of list-item marker