목록을 만들 경우 목록 앞의 불릿이나 번호는 실제 내용의 바깥쪽에 표시됩니다. 하지만 list-style-position 속서을 이용하면 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하기 때문에 결과 화면에는 불릿이나 번호가 좀 더 안쪽으로 들여 써진 듯한 효과가 나타납니다. 이렇게 하면 텍스트 문들들 사이의 목록을 더 쉽게 구분 할 수 있습니다.
list-style-position
list-style-position으로 <ul>, <ol> 등의
목록의 마커의 위치를 정합니다.
기본형
list-style-position : inside | outside
- inside : 문단 안쪽에 놓습니다.
- outside : 문단 바깥쪽에 놓습니다.
예제
다음은 list-style-position을 outside로 지정했을 경우와 inside로 지정했을 경우를 비교한 예제입니다.
<p>list-style-position: outside</p>
<ul class="outside">
<li>List Item 1-1</li>
<li>List Item 1-2</li>
<li>List Item 1-3</li>
<li>List Item 1-4</li>
</ul>
<p>list-style-position: inside</p>
<ul class="inside">
<li>List Item 2-1</li>
<li>List Item 2-2</li>
<li>List Item 2-3</li>
<li>List Item 2-4</li>
</ul>
.outside {
list-style-position: outside;
list-style-type: square;
}
.inside {
list-style-position: inside;
list-style-type: circle;
}
inside로 지정할 경우 불릿만큼 안쪽으로 들여써집니다.