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

[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
부모요소의 속성값 상속.



분류 제목
animation CSS - animation-direction 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, I…
animation CSS - animation-duration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간…
animation CSS - animation-fill-mode 속성 - 애니미작동스타일 (= 움직임 작동안할때 스타일 = 애…
animation CSS - animation-iteration-count 속성 - 애니반복횟수 (= 움직임반복횟수, IE10…
animation CSS - animation-name 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메…
animation CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/…
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬/중앙정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
button CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)
pagination CSS - 페이징 - 기본 스타일 (Simple Pagination)
pagination CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
9/27
목록
찾아주셔서 감사합니다. Since 2012