list-style-position는 목록 형태에서 블롯이나 번호를 좀 더 안쪽으로 들여 써지게 하는 속성
|
속성 |
설명 |
|
inside |
블롯이나 숫자를 안쪽으로 들여씀 |
|
outside |
블롯이나 숫자를 밖으로 내어씀 |
티스토리 뷰
1. 개념
list-style-position - 목록에서 들여쓰기
2. 태그
list-style-position
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
1
<ul style
= '
list-style-type
:
disc
'
>
<li>
목록1
</li>
<li>
목록2
</li>
<li>
목록3
</li>
</ul>
2
<ul style
= '
list-style-type
:
disc
;
list-style-position
:
inside
'
>
<li>
목록4
</li>
<li>
목록5
</li>
<li>
목록6
</li>
</ul>
</body>
</html>
|
결과 화면
코드 설명
1
list-style-type
:
desc
;
처음 예제는 list-style-position 속성 값을 지정하지 않았습니다.
이렇게 아무런 값을 지정하게 않게 되면 기본 값으로 outside가 지정이 되어 밖으로 내어 쓰게 됩니다.
이렇게 아무런 값을 지정하게 않게 되면 기본 값으로 outside가 지정이 되어 밖으로 내어 쓰게 됩니다.
2
list-style-position
:
inside
;
inside는 안쪽으로 들여쓰는 속성으로 2번에서 보시는 것처럼 효과가 나타나는 것을 확인하실 수 있습니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] background-color - 배경 색 지정 (0) | 2021.04.13 |
|---|---|
| [css3] list-style - 목록 속성 한꺼번에 지정 (0) | 2021.04.12 |
| [css3] list-style-image - 목록 스타일을 이미지로 넣기 (0) | 2021.04.09 |
| [css3] list-style-type - 목록 불릿과 번호 스타일 지정 (0) | 2021.04.09 |
| [css3] text-overflow - 넘치는 텍스트 표기 (0) | 2021.04.08 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday