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
2.
모든 브라우저 지원.
list-style-position 구문
selector {list-style-position: inside|outside|initial|inherit;}
[속성값]
outside
마커를 list 태그 바깥에 위치.
텍스트 좌측열은 수직 정렬됨.
inside
마커를 list 태그 안에 위치.
텍스트 첫 행을 들여쓰기 함.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
