CSS 06. 목록 관련 스타일

목록 관련 스타일(list-)

list-style-type : 불릿 기호 변경
list-style-image : 불릿기호로 이미지 적용
list-style-position : 불릿기호의 위치를 조정할때 사용

*순서 없는 목록 (ul)

선택자{

        list-style-type : disc | circle | square | none;

        list-style-image : url("적용시키고자 하는 이미지의 경로");

        list-style-position : inside | outside(기본값);

    }

*순서 있는 목록(ol)

선택자{

        list-style-type : decimal | decimal-leading-zero(숫자앞 0붙여줌);

        list-style-type : lower-alpha | upper-alpha;

        list-style-type : lower-raman | upper-roman;

    }

<h4>순서없는 list</h4>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
<h4>순서있는 list</h4>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>
<style>
        ul{
            list-style-type:disc;
            list-style-type:circle;
            list-style-type:square;
            list-style-type:none;
            list-style-image:url("resources/image/icon.png");
        }
        ol{
            list-style-type:decimal-leading-zero;
            list-style-type:upper-alpha;
            list-style-type:lower-roman;
            list-style-position: inside; 
        }
    </style>

순서없는 list

• HTML
• CSS
• JavaScript
• jQuery

순서있는 list

1. HTML
2. CSS
3. JavaScript
4. jQuery