CSS의 marker-offset 속성은 목록에서 마커(불릿 기호)와 해당 마커에 연결된 텍스트 사이의 거리를 지정하는 데 사용됩니다. 이 속성을 활용하면 목록 항목의 불릿과 본문 텍스트 사이의 간격을 원하는 만큼 넓히거나 좁힐 수 있습니다.
사용 예제
다음 예제는 list-style과 함께 marker-offset 속성을 적용하여 마커와 텍스트 사이의 간격을 2em으로 설정한 모습입니다.
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>LAN</li>
<li>WAN</li>
</ul>
</body>
</html>
코드 설명
list-style: inside square— 목록 마커를 사각형(square)으로 지정하고, 마커가 콘텐츠 흐름 안쪽(inside)에 배치되도록 설정합니다.marker-offset: 2em— 마커와 텍스트 사이의 거리를 글꼴 크기의 2배(em 단위)만큼 떨어지게 합니다.
브라우저 호환성 참고 사항
marker-offset 속성은 초기 CSS 명세에서 제안되었지만, 현재 대부분의 최신 브라우저에서는 공식적으로 지원되지 않습니다. 따라서 실무에서는 이 속성 대신 다음과 같은 방법을 사용하는 것이 좋습니다.
- margin / padding 활용:
li요소나::before가상 요소에 여백을 주어 마커와 텍스트 간격을 조절합니다. - ::marker 가상 요소: 최신 브라우저에서는
::marker선택자로 목록 마커의 스타일을 직접 제어할 수 있습니다.
레거시 프로젝트 유지 보수 시에는 위 예제처럼 marker-offset이 사용된 경우가 있으므로, 의미를 정확히 이해하고 필요에 따라 현대적인 방식으로 대체하는 것이 바람직합니다.