목록 관련 스타일


  • list-style-type

리스트앞에 불릿모양을 변경하거나 숫자모양을 지정하게 해줍니다.(그냥 <ol type="종류">이렇게 하는게 스타일에서 하는 것보다 편할거 같습니다...)

불릿종류↓

종류 

설명 

disc 

 ●불릿을 의미합니다.

square

 ■불릿을 의미합니다.

circle 

 ○불릿을 의미합니다.

none 

 불릿이 없게 만듭니다.


숫자종류↓

 종류

설명 

decimal 

평소쓰는 10진수(1, 2, 3순서)를 말합니다.

decimal-leading-zero

10진수이지만 01, 02같이 보여집니다. 

lower-roman 

말그대로 로마문자 소문자입니다. 

upper-roman 

로마문자 대문자입니다. 

lower-alpha, lower-latin

alpha는 알파벳이고 latin은 라틴어지만 보여지는 것은 같습니다.(소문자)

upper-alpha, upper-latin

위와 설명이 같고 대문자입니다.

위와같은 것들이 있습니다.(몇가지 더있지만 생략하겠습니다.)


소스코드↓(← = &larr입니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_square{
            list-style-type:square;
        }
        #list_roman {
            list-style-type: upper-roman;
        }
 </style>
    <ol id="list_square">
        <li>←네모</li>
    </ol>
    <ul id="list_square"><!--ol에 목록 스타일을 지정하면 li에 적용되지만 ul은 아니다.-->
        <li>←네모가 아님</li>
    </ul>
    <ul id="list_roman">
        <li>←대문자 로마문자</li>
    </ul>
</body>
</html>
cs
  • list-style-image
불릿을 그냥 설정하지않고 사진으로 대체하는 속성입니다.
사용방법은 list-style-image:url('사진의 경로');이렇게 사용하시면 됩니다. (하지만 이미지를 구해야한다는 귀찮음이 있습니다.)
소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_image{
            list-style-image:url('image/image3.png');
        }
</style>
    <ul id="list_image">
        <li>←사진이 출력됨</li>
    </ul>
</body>
</html>
cs


  • list-style-position

목록을 들여쓸 때 사용하는 속성입니다.(inside, outside속성등이 있고 말그대로 안쪽 바깥쪽으로 들여쓰는 의미입니다.)

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #list_position{
            list-style-position:outside;
        }
  </style>
    <ol id="list_position">
        1
        <li>들여써짐</li>
    </ol>
</body>
</html>
cs


  • list-style
이전에 배운 type속성과 position속성을 같이 한번에 적용할 때 사용합니다.
list-style:type속성,position속성;이렇게 사용할 수 있고 하나의 속성 값만 사용할 수도 있습니다.


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

그라데이션 효과 만들기  (0) 2018.01.08
색상과 배경 스타일  (0) 2018.01.07
문단 스타일  (0) 2018.01.04
글 관련 스타일  (0) 2018.01.03
CSS기초  (0) 2018.01.03

+ Recent posts

티스토리툴바