• 회원가입
  • 로그인
  • 구글아이디로 로그인

[list] CSS - 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.
모든 브라우저 지원.
 
 

list-style-position 구문 
 
selector {list-style-position: inside|outside|initial|inherit;}

 


[속성값]

 

outside
마커를 list 태그 바깥에 위치.
텍스트 좌측열은 수직 정렬됨.
 
inside
마커를 list 태그 안에 위치.
텍스트 첫 행을 들여쓰기 함.
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모요소의 속성값 상속.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
list CSS - list-style 속성 ★ - 리스트 스타일 일괄 (= 리스트마커 = list-style속성 =…
list CSS - list-style-type 속성 ★ - 리스트 스타일 타입 (= 리스트 마커 종류 = 리스트스타…
list CSS - list-style-image 속성 - 리스트 스타일 이미지 (= 리스트 마커 이미지 = list…
list CSS - list-style-position 속성 ★ - 리스트 스타일 위치 (= 리스트 마커 위치 = …
목록
찾아주셔서 감사합니다. Since 2012