목록 스타일

1. 불릿 모양과 번호 스타일 지정 list-style-type

ul의 경우 다양한 불릿 모양 지정

ol의 경우 번호 스타일 지정

disc	채운 원
circle	빈 원
square	채운 사각형
decimal	1,2,3,4,,,
decimal-leading-zero	01, 02, 03, 04,,,
lower-roman	로마 숫자 소문자
upper-roman	로마 숫자 대문자
lower-alpha	알파벳 소문자
upper-alpha	알파벳 대문자
none	불릿, 숫자 없음

 

2. 불릿 대신 이미지 list-style-image

불릿을 대신할 이미지는 크기가 아주 작아야 함

 

3. 목록을 들여쓰기 list-style-position

inside는 들여쓰기, outside는 기본값이다.

 

<style>
        .todo1 {list-style-type:square;}
        .todo2 {list-style-type:upper-alpha;}
        .todo3 {list-style-image:url('images/dot.png');}
        .inside {list-style-position:inside;}
        .all {list-style:url('images/dot.png') inside;} /*속성 여러 개 한번에 쓰기*/
    </style>
    <h1>To do 리스트!</h1>
    <ul class="todo1">
        <li>운동하기</li>
        <li>공부하기</li>
        <li>알바하기</li>
    </ul>
    <ol class="todo2">
        <li>운동하기</li>
        <li>공부하기</li>
        <li>알바하기</li>
    </ol>
    <ul class="todo3">
        <li>운동하기</li>
        <li>공부하기</li>
        <li>알바하기</li>
    </ul>
    <ul class="inside">
        <li>운동하기</li>
        <li>공부하기</li>
        <li>알바하기</li>
    </ul>
    <ul class="all">
        <li>운동하기</li>
        <li>공부하기</li>
        <li>알바하기</li>
    </ul>

list-style

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.