HTML에서 비순차 목록(unordered list)에 기본 글머리 기호 대신 이미지를 적용하면 목록의 시각적인 완성도를 한층 높일 수 있습니다. 이번 글에서는 CSS의 list-style-image 속성을 활용해 이미지 글머리 기호를 설정하는 방법을 알아봅니다.
HTML 비순차 목록의 기본 구조
HTML에서 비순차 목록을 만들 때는 <ul> 태그를 사용합니다. 목록 전체는 <ul> 태그로 감싸고, 각 항목은 <li> 태그로 작성합니다. 항목 앞에는 디스크(disc), 사각형(square), 원(circle) 등의 글머리 기호가 표시되며, 기본값은 작은 검은색 원 형태의 disc입니다.
list-style-image로 이미지 글머리 기호 적용하기
글머리 기호를 이미지로 바꾸려면 CSS 속성인 list-style-image를 사용합니다. 이 속성의 url() 함수에 이미지 경로를 지정하면, 해당 이미지가 목록 항목의 글머리 기호로 표시됩니다.
여기서는 요소에 직접 스타일을 적용하는 style 속성(인라인 스타일)을 활용해 보겠습니다. HTML의 <ul> 태그에 style 속성을 추가하고, 그 안에 list-style-image와 함께 이미지 소스 URL을 설정하면 됩니다.
단, 주의할 점이 있습니다. style 속성으로 지정한 인라인 스타일은 다른 어떤 스타일 선언보다 우선 적용됩니다. 즉, 문서 내부의 <style> 태그나 외부 스타일시트에서 정의한 스타일보다 인라인 스타일이 항상 우선권을 가지므로, 의도치 않은 스타일 덮어쓰기가 발생하지 않도록 주의해야 합니다.
예제
다음 코드를 실행하면 비순차 목록에 이미지 글머리 기호가 적용된 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>Tutorials</h2>
<p>The list of tutorials:</p>
<ul style="list-style-image: url('/theme/css/icons/image-editor.png');">
<li>Java</li>
<li>C++</li>
<li>Ruby</li>
</ul>
</body>
</html>
위 예제처럼 <ul> 태그에 list-style-image 속성만 추가하면 별도의 이미지 태그 없이도 목록의 모든 항목에 동일한 이미지 글머리 기호가 일괄 적용됩니다. 프로젝트의 아이콘이나 테마에 맞는 이미지를 활용해 더욱 세련된 목록을 만들어 보세요.