CSS / list-style-position / 목록의 마커 위치 정하는 속성
개요
list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다.
- 기본값 : outside
- 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 1
문법
|
1 |
list-style-position: inside | outside | initial | inherit |
- inside : 문단 안쪽에 놓습니다.
- outside : 문단 바깥쪽에 놓습니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .os { list-style-position: outside; } .is { list-style-position: inside; } </style> </head> <body> <p>list-style-position: outside;</p> <ul class="os"> <li>Lorem ipsum dolor sit amet</li> <li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</li> </ul> <p>list-style-position: outside;</p> <ul class="is"> <li>Lorem ipsum dolor sit amet</li> <li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</li> </ul> </body> </html> |
브라우저 지원
- Chrome : 1.0+
- Firefox : 1.0+
- Internet Explorer : 4.0+
- Opera : 3.5+
- Safari : 1.0+