list style

CSS/CSS_ex

ldh1123 2023. 3. 9. 08:29

list-style-type

불릿 모양을 설정
decimal은 숫자, circle은 속이 빈 원, square는 속이 찬 사각형

.cook_1 {
    list-style-type: decimal;
}

<ul class="cook_1">
    <li>오므라이스</li>
    <li>한솥</li>
    <li>서브웨이</li>
</ul>

불릿을 이미지로 설정

.cook_2 {
    list-style-image: url(../IMG/bullet.png);
}

<ul class="cook_2">
    <li>오므라이스</li>
    <li>한솥</li>
    <li>서브웨이</li>
</ul>

한줄에 몰아서 쓸수도 있음

.cook_3 {
    list-style: decimal inside;
}

inside는 들여쓰기
outside는 내어쓰기

.cook_1 {
    list-style-type: decimal;
    list-style-position: inside;
}