list-style는 list-style-type,list-style-position,list-style-image 속성을 한꺼번에 지정할 수 있는 속성
티스토리 뷰
1. 개념
list-style - 목록 속성 한꺼번에 지정
2. 태그
list-style
html5 코드
|
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
27
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
1
<ul style
= '
list-style
:
none
'
>
<li>
목록1
</li>
<li>
목록2
</li>
<li>
목록3
</li>
</ul>
2
<ul style
= '
list-style
:
inside square
'
>
<li>
목록4
</li>
<li>
목록5
</li>
<li>
목록6
</li>
</ul>
3
<ul style
= '
list-style
:
lower-alpha
'
>
<li>
목록7
</li>
<li>
목록8
</li>
<li>
목록9
</li>
</ul>
</body>
</html>
|
결과 화면
코드 설명
1
list-style
:
none
;
list-style은 위에서 말한 3개의 속성의 값만을 입력해 주면 같은 효과를 나타냅니다.
1번에서처럼 none라고만 입력해주면 list-style-type에서 none과 같은 효과를 나타내 주고 있습니다.
1번에서처럼 none라고만 입력해주면 list-style-type에서 none과 같은 효과를 나타내 주고 있습니다.
2
list-style
:
inside square
;
두번째는 list-style에 inside와 square를 사용했습니다.
이것은 list-style-position : inside , list-style-type:square 와 같은 효과를 나타내고 있습니다
이것은 list-style-position : inside , list-style-type:square 와 같은 효과를 나타내고 있습니다
3
list-style
:
lower-alpha
;
세번재는 lower-alpah라고 속성을 지정하면 list-style-type을 lower-alpha로 지정한 것과 같이 됩니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] background-clip - 배경색 적용 범위 (0) | 2021.04.13 |
|---|---|
| [css3] background-color - 배경 색 지정 (0) | 2021.04.13 |
| [css3] list-style-position - 목록에서 들여쓰기 (0) | 2021.04.12 |
| [css3] list-style-image - 목록 스타일을 이미지로 넣기 (0) | 2021.04.09 |
| [css3] list-style-type - 목록 불릿과 번호 스타일 지정 (0) | 2021.04.09 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday