II. 텍스트 - 4. 목록 스타일

Hush 2022. 6. 2. 21:38

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

순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있고,

순서 목록에서는 번호 스타일을 지정할 수 있다.

종류	설명	예시
disc	채운 원 모양	●
circle	빈 원 모양	○
square	채운 사각형 모양	■
decimal	1부터 시작하는 10진수	1, 2, 3, ...
decimal-leading-zero	앞에 0이 붙는 10진수	01, 02, ...
lower-roman	로마 숫자 소문자	i, ii, iii, ...
upper-roman	로마 숫자 대문자	I, II, III, ...
lower-alpha 또는 lower-latin	알파벳 소문자	a, b, c, ...
upper-alpha 또는 upper-latin	알파벳 대문자	A, B, C, ...
none	불릿이나 숫자를 없앰

이러한 스타일을 ul 이나 ol 태그에데가 부여해주면 된다.

list-style-image : 불릿 대신 이미지를 사용

이 속성을 사용하면 불릿을 원하는 이미지로 바꿀 수 있다.

이 경우 불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <ul style="list-style-image: url('images/star-bullet.png');">
            <li>list1</li>
            <li>list2</li>
        </ul>
    </body>
</html>

list-style-position : 목록을 들여 쓰기

불릿이나 번호의 위치를 들여 쓸 수 있다.

속성으로 inside를 지정하면 리스트가 조금 더 안으로 들여써진다.

기본값은 outside이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <ul style="list-style-position: outside;">
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
        <ul style="list-style-position: inside;">
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </body>
</html>

list-style : 목록 속성을 한꺼번에 표시

목록 속성값들은 서로 이름이 중복되지 않는다.

list-style은 지금까지 살펴본 속성들을 한꺼번에 적어줄 수 있다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <ul style="list-style : square inside;">
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </body>
</html>

저작자표시 (새창열림)