CSS

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



분류 제목
position CSS - overflow-x 속성 - 수평방향으로 넘치는 내용 처리 방법 지정 (= overflow-x속성…
scroll CSS - scroll-margin 속성 - 스크롤마진 일괄 지정 (= scroll-margin속성 = 스크…
css CSS - isolation 속성 - 요소가 새 스택(stack: 쌓음) 콘텐츠를 생성해야 하는지 여부 지정…
scroll CSS - scroll-behavior 속성 ★ - 스크롤박스 내 동일 페이지 링크 이동 시 부드럽게 이동할…
grid CSS - grid-auto-columns 속성(C) - 그리드 열 너비 일괄 지정 (= grid-auto-…
background CSS - background-position-x 속성 - 배경이미지 x축위치(=수평위치) 설정 (= bac…
grid CSS - grid-row-start 속성(I) - 그리드 아이템 행 시작 위치 및 확장 지정 (= grid…
grid CSS - grid-row 속성(I) - 그리드 아이템 행 '시작위치와 끝위치 / 크기확장' 지정 (= gr…
box CSS - box-decoration-break 속성 - 요소 상자 깨지는 방식 지정 (= box-decor…
image CSS - image-rendering 속성 - 크기 조정 가능 이미지의 렌더링 방식 지정 (= image-…
grid CSS - grid-auto-rows 속성(C) - 그리드 행 높이 일괄 지정 (= grid-auto-row…
scroll CSS - scrollbar-color 속성 - 스크롤바 색상 지정 (= scrollbar-color속성 =…
css CSS - accent-color 속성 - 사용자 제어 선택요소의 색상/색깔 지정 (= accent-colo…
background CSS - background-blend-mode 속성 - 해당요소 각 (배경색/배경미미지)층의 혼합방식 지…
grid CSS - grid-template 속성 - 그리드 행열 및 영역 개별 지정 (= grid-template속…
12/35
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드 1
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인