모든 브라우저에서 이미지 마커를 올바르게 표시하려면 크로스 브라우저(cross-browser) 솔루션이 필요합니다. list-style-image 속성으로 이미지 마커를 지정하면, 마커 뒤에 이어지는 텍스트 정렬이 브라우저마다 다르게 깨져 보이는 경우가 있습니다.
이러한 문제를 해결하고 일관된 결과물을 얻으려면, 마커로 사용할 이미지를 목록 항목의 배경(background)으로 지정한 뒤 위치와 여백을 직접 조정하는 방식을 사용하는 것이 가장 효과적입니다.
예제 1
다음 예제는 배경 이미지를 활용해 리스트에 이미지 마커를 적용하는 방법을 보여줍니다 −
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-type: none;
padding: 0px;
margin: 0px;
font-size: 1.5em;
}
ul li{
background-image: url("https://www.tutorialspoint.com/images/spring.png");
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 24px;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>C</li>
<li>C++</li>
<li>Spring</li>
<li>Hibernate</li>
</ul>
</body>
</html>코드 설명은 다음과 같습니다.
list-style-type: none;— 기본 불릿(bullet) 마커를 제거합니다.background-image,background-repeat: no-repeat;— 각 항목 좌측에 이미지가 한 번만 표시되도록 설정합니다.background-position: 0px 5px;— 이미지의 세로 위치를 미세 조정해 텍스트와 자연스럽게 정렬합니다.padding-left: 24px;— 텍스트가 이미지와 겹치지 않도록 충분한 왼쪽 여백을 확보합니다.
출력 결과
위 코드는 다음과 같은 결과를 출력합니다 −
예제 2
두 번째 예제는 박스 그림자(box-shadow)와 함께 이미지 마커를 적용해 시각적으로 더욱 돋보이는 리스트를 만드는 방법입니다 −
<!DOCTYPE html>
<html>
<head>
<style>
ul{
box-shadow: inset 0 0 8px orange;
list-style-type: none;
padding: 12px;
padding-left: 20px;
margin: 2px;
font-size: 1.35em;
}
ul li{
background-image: url("https://www.tutorialspoint.com/images/css.png");
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 40px;
font-style: italic;
}
</style>
</head>
<body>
<p>Requirements:</p>
<ul>
<li>Tutorials</li>
<li>Interview QA</li>
<li>Quiz</li>
</ul>
</body>
</html>이 예제에서는 box-shadow: inset 0 0 8px orange;를 사용해 목록 영역 내부에 주황색 음영 효과를 추가했으며, font-style: italic;으로 항목 텍스트에 기울임꼴을 적용했습니다. 또한 padding-left: 40px;로 여백을 넓혀 이미지와 텍스트 사이의 간격을 조절했습니다.
출력 결과
위 코드는 다음과 같은 결과를 출력합니다 −
정리
이미지 마커를 구현할 때는 list-style-image 대신 배경 이미지 방식을 사용하는 것이 좋습니다. 이 방법은 브라우저별 렌더링 차이를 최소화하고, background-position과 padding-left를 통해 마커와 텍스트의 정렬을 정밀하게 제어할 수 있어 어떤 환경에서도 동일한 화면을 보장합니다.