목차
- list-style-position 예제 - 리스트스타일 위치 지정
- list-style-position 정의
- list-style-position 구문
list-style-position 예제 - 리스트스타일 위치 지정
<style>
div {width:300px;}
li {border:1px solid red;}
.outside {list-style-position: outside;}
.inside {list-style-position: inside;}
</style>
<div>
<ul class="outside">
<li>outside 홈짱닷컴 (homzzang.com) html 강의</li>
<li>outside 홈짱닷컴 (homzzang.com) css 강의</li>
</ul>
<ul class="inside">
<li>inside 홈짱닷컴 (homzzang.com) html 강의</li>
<li>inside 홈짱닷컴 (homzzang.com) css 강의</li>
</ul>
</div>
list-style-position 정의
리스트 마커 (= 글 머리 기호)의 위치 지정.
※ 마커 (Marker : 리스트 앞 도형이나 문자) = 블릿 (bullet)
1.
- 기본값 : outside
- 상속여부 : O
- 애니효과 : X
- CSS버전 : CSS1
- JS구문 : object.style.listStylePosition="inside";
2.
3. MDN list-style-position 예제보기
list-style-position 구문
selector {list-style-position: inside|outside|initial|inherit;}
[속성값]
outside
마커를 list 태그 바깥에 위치. (텍스트 좌측열은 수직 정렬됨.)
inside
마커를 list 태그 안에 위치. (텍스트 첫 행을 들여쓰기 함.)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.