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

[list] CSS - list-style-position 속성 ★ - 리스트 스타일 위치 (= 리스트 마커 위치 = 리스트스타일포지션속성)

목차
  1. list-style-position 예제 - 리스트스타일 위치 지정
  2. list-style-position 정의
  3. 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
부모요소의 속성값 상속.



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