CSS marker-offset 속성이란?
marker-offset 속성은 목록의 마커(불릿 또는 번호)와 해당 마커에 연결된 텍스트 사이의 거리를 지정할 수 있는 CSS 속성입니다.
이 속성을 사용하면 목록 항목 앞에 표시되는 기호나 숫자가 본문 텍스트로부터 얼마나 떨어져 있을지 간격을 세밀하게 조정할 수 있습니다.
주요 특징
- 거리 값은
em,cm,px등 다양한 길이 단위로 지정할 수 있습니다. - 마커의 위치(
list-style-position: inside또는outside)에 따라 시각적인 간격 효과가 달라집니다.
예제 코드
아래 코드를 실행하면 marker-offset 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html> <head> </head> <body> <ul style = "list-style: inside square; marker-offset:3em;"> <li>UK</li> <li>US</li> </ul> <ol style = "list-style: outside upper-alpha; marker-offset:3cm;"> <li>UK</li> <li>US</li> </ol> </body> </html>
코드 설명
- 첫 번째
<ul>요소는inside square스타일로 정사각형 불릿을 텍스트 내부에 배치하고, 마커와 텍스트 사이의 거리를3em으로 설정합니다. - 두 번째
<ol>요소는outside upper-alpha스타일로 대문자 알파벳(A, B) 마커를 텍스트 외부에 배치하고, 거리를3cm으로 지정합니다.
참고 사항
marker-offset 속성은 CSS2 명세에서 제안되었지만, 주요 브라우저에서 널리 지원되지 않아 현재는 사실상 사용되지 않습니다. 최신 웹 개발에서는 유사한 간격 조절을 위해 padding-left, text-indent, 또는 ::marker 가상 요소 등을 활용하는 것이 좋습니다.