CSS 리스트 스타일링 완벽 가이드: list-style 속성으로 목록 꾸미기

리스트는 HTML에서 데이터를 표시하는 중요한 방법입니다. 신발 사이즈나 내비게이션 메뉴처럼 공통된 주제를 가진 여러 항목을 다룰 때는 리스트 형태로 데이터를 제시하는 것이 가장 효과적입니다.

하지만 HTML의 기본 리스트는 상당히 밋밋합니다. 바로 이때 CSS의 list-style 속성이 빛을 발합니다. list-style 속성과 그 하위 속성들을 활용하면 리스트를 자신만의 웹사이트 디자인에 어울리도록 자유롭게 커스터마이징할 수 있습니다.

이 글에서는 예제와 함께 list-style 속성과 하위 속성을 사용해 CSS로 리스트를 스타일링하는 방법을 살펴봅니다. 또한 리스트와 리스트 항목에 배경색을 지정하는 방법까지 다루니, 끝까지 읽고 나면 CSS 리스트 스타일링 전문가가 될 수 있을 것입니다.

HTML과 CSS 리스트의 기본

리스트는 서로 연관된 여러 항목을 보여줄 때 사용됩니다. HTML에는 데이터를 제시하기 위한 세 가지 유형의 리스트가 있습니다.

• 순서 없는 리스트(Unordered List) (<ul>) – 항목 앞에 불릿 포인트(bullet point)가 붙는 리스트입니다.
• 순서 있는 리스트(Ordered List) (<ol>) – 숫자나 문자 같은 순서 체계로 항목이 표시되는 리스트입니다.
• 정의 리스트(Definition List) (<dl>) – 항목과 함께 설명이 붙는 리스트입니다.

HTML 리스트에 대해 더 자세히 알고 싶다면 HTML 리스트 관련 문서를 참고해 보세요.

위의 각 리스트 유형은 고유한 기본 HTML 스타일을 가지고 있습니다. 여기에 CSS가 제공하는 다양한 속성을 활용하면 리스트를 더욱 미려하게 만들고 사이트의 디자인 가이드에 맞출 수 있습니다.

CSS 리스트 속성으로 할 수 있는 작업은 다음과 같습니다.

• 순서 있는 리스트의 항목 마커 변경
• 순서 없는 리스트의 항목 마커 변경
• 이미지를 리스트 항목 마커로 지정
• 리스트와 항목에 배경색 추가

이 글에서는 CSS로 리스트를 스타일링하는 두 가지 큰 방법, 즉 list-style 속성의 개별 하위 속성을 사용하는 방법과 list-style 단축(shorthand) 속성을 사용하는 방법을 다룹니다. list-style 속성의 하위 속성은 다음과 같습니다.

• list-style-type
• list-style-position
• list-style-image

list-style 단축 속성은 다음과 같이 작성합니다.

list-style: [list-style-type] [list-style-position] [list-style-image];

그리고 리스트와 리스트 항목에 배경색을 지정하는 방법도 함께 알아보겠습니다.

기본 HTML 리스트 예제

먼저 HTML 리스트의 간단한 예제를 살펴보겠습니다. 어떤 동네 빵집에서 고객들이 집에서 따라 만들 수 있도록 레시피 목록이 담긴 웹 페이지를 의뢰했다고 가정해 봅시다.

리스트를 정의하는 데 사용할 기본 HTML 코드는 다음과 같습니다.

<ul>
	<li>버터플라이 케이크</li>
	<li>초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

각 리스트 항목은 <li>(list item, 리스트 항목) 태그로 감싸고, 이 <li> 태그들을 <ul> 태그로 감쌉니다. <ul> 태그는 순서 없는 리스트를 나타냅니다.

순서 없는 리스트이기 때문에 웹 브라우저는 각 항목 앞에 불릿 포인트를 표시합니다. 만약 순서 있는 리스트였다면 브라우저는 각 항목 앞에 숫자나 문자 같은 순서 값을 붙였을 것입니다.

이제 list-style 속성을 사용해 리스트를 스타일링하는 방법을 살펴보겠습니다.

리스트 항목 마커(List Item Markers)

list-style-type 속성은 리스트 항목에 사용될 마커의 종류를 지정할 때 사용합니다.

순서 없는 리스트의 항목 마커

빵집에서 각 항목 앞의 불릿 포인트를 원(circle) 모양과 사각형(square) 모양으로 바꾼 모습을 비교해 보고 싶어 한다고 가정해 봅시다. 다음 코드로 이를 구현할 수 있습니다.

styles.css

li.circlebulletPoint {
	list-style-type: circle;
}

li.squarebulletPoint {
	list-style-type: square;
}

index.html

<ul>
	<li class="circlebulletPoint">버터플라이 케이크</li>
	<li class="squarebulletPoint">초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

첫 번째 리스트 항목에는 'circlebulletPoint' 클래스를 지정했기 때문에 해당 클래스에 대응하는 스타일이 적용되어 원형 불릿이 표시됩니다. 두 번째 항목에는 'squarebulletPoint' 클래스를 지정했으므로 해당 항목 앞에는 사각형 불릿이 나타납니다.

리스트에 적용할 수 있는 다른 list-style-type 값들은 다음과 같습니다.

• disc
• circle
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• none

이 중 순서 있는 리스트에 적용되는 몇 가지 값은 다음 섹션에서 다루겠습니다.

순서 있는 리스트의 항목 마커

순서 있는 리스트는 고유한 항목 마커 스타일을 가지고 있습니다.

이번에는 빵집의 레시피를 순서 있는 리스트로 표시한다고 가정해 봅시다. 각 항목 앞에 소문자 알파벳이 붙은 모습과 대문자 로마 숫자가 붙은 모습을 확인하고 싶습니다. 다음 코드로 구현할 수 있습니다.

styles.css

li.alpha {
	list-style-type: lower-alpha;
}

li.roman {
	list-style-type: upper-roman;
}

index.html

<ol>
	<li class="alpha">버터플라이 케이크</li>
	<li class="roman">초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ol>

이 예제에서는 순서 없는 리스트 대신 순서 있는 리스트(<ol>)를 사용했습니다. 덕분에 리스트를 숫자나 문자 등으로 순서 지을 수 있습니다. 그리고 첫 번째 항목에는 소문자 알파벳 마커를, 두 번째 항목에는 대문자 로마 숫자 마커를 적용했습니다.

기본 리스트 마커 스타일 제거하기

CSS에서는 list-style-type, margin, padding 세 가지 속성을 사용해 리스트의 기본 스타일 요소를 제거할 수 있습니다.

list-style-type을 none으로 설정하기

리스트 항목 앞에 불릿 포인트나 순서 표시(숫자, 문자 등)를 전혀 넣고 싶지 않다면 list-style-type 속성을 none으로 설정하면 됩니다.

styles.css

ul {
	list-style-type: none;
}

index.html

<ul>
	<li>버터플라이 케이크</li>
	<li>초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

결과를 보면 리스트 구조는 그대로 유지되지만, 웹 페이지에 표시될 때 항목들 앞에 마커가 나타나지 않습니다.

마커 위치 지정하기(list-style-position)

list-style-position 속성은 리스트 항목 마커의 위치를 지정할 때 사용합니다.

마커가 표시될 수 있는 위치는 inside와 outside 두 가지입니다. 마커가 리스트 안쪽(inside)에 있으면 텍스트가 마커 바로 옆에 붙어 표시되고, 바깥쪽(outside)에 있으면 마커와 텍스트 사이에 간격이 생깁니다.

두 상태를 각각 적용하는 CSS 규칙의 예는 다음과 같습니다.

ul.a {
	list-style-position: outside;
}

ul.b {
	list-style-position: inside;
}

첫 번째 리스트에는 list-style-position: outside 스타일을 적용했습니다. 이것이 리스트에 기본적으로 적용되는 스타일이므로, 코드에서 별도로 지정하지 않아도 브라우저는 기본적으로 이 위치를 사용합니다. 해당 스타일을 적용한 빵집 리스트의 코드는 다음과 같습니다.

<ul class="a">
	<li>버터플라이 케이크</li>
	<li>초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

이 스타일에서는 리스트 항목 마커(여기서는 불릿 포인트)가 리스트 항목 바깥쪽에 표시됩니다.

두 번째 리스트에서는 마커 위치를 'inside'로 지정했습니다. 코드는 다음과 같습니다.

<ul class="b">
	<li>버터플라이 케이크</li>
	<li>초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

이 경우 마커가 리스트 항목 안쪽으로 들어가 텍스트와 나란히 표시됩니다.

이미지 마커 적용하기(list-style-image)

리스트에는 이미지를 활용한 커스텀 마커를 자주 사용합니다. 리스트 항목의 마커를 이미지로 지정하고 싶다면 list-style-image CSS 속성을 사용하면 됩니다.

빵집에서 리스트의 항목 마커를 불릿 포인트나 숫자 대신 케이크 이미지로 바꿔 달라고 요청했다고 가정해 봅시다. 다음 코드로 구현할 수 있습니다.

styles.css

ul {
	list-style-image: url("https://img.icons8.com/small/16/000000/cake.png");
}

index.html

<ul>
	<li>버터플라이 케이크</li>
	<li>초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

기본 리스트 마커 대신 우리만의 마커를 사용한 결과, 각 항목 앞에 케이크 이미지가 표시됩니다.

list-style 단축 속성 활용하기

지금까지는 list-style 속성의 하위 속성들을 하나씩 사용해 리스트에 개별 스타일을 적용했습니다.

하지만 더 효율적인 방법이 있습니다. 각 하위 속성을 따로 사용하는 대신 list-style 단축 속성 하나로 한 번에 처리할 수 있습니다. 문법은 다음과 같습니다.

ul {
	list-style: [list-style-type] [list-style-position] [list-style-image];
}

단축 속성을 사용할 때는 위에 명시된 순서대로 값을 작성해야 합니다. 세 가지 하위 속성 중 하나의 값을 생략하면 브라우저는 해당 하위 속성의 기본값을 사용합니다.

예를 들어 베이킹 레시피 리스트에 케이크 이미지 마커를 적용하면서 동시에 마커를 리스트 바깥쪽에 배치하고 싶다고 해봅시다. 다음 코드로 가능합니다.

styles.css

ul {
	list-style: outside url('https://img.icons8.com/small/16/000000/cake.png');
}

index.html

<ul>
	<li>버터플라이 케이크</li>
	<li>초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

이제 리스트의 각 항목 마커에 케이크 이미지가 사용되고, 마커는 리스트 바깥쪽에 배치됩니다.

CSS 리스트 배경색 지정하기

리스트를 디자인할 때 배경색을 적용하고 싶을 수 있습니다.

빵집에서 리스트 전체의 배경색은 연한 파란색으로, 각 항목의 배경색은 분홍색으로 설정해 달라고 요청했다고 가정해 봅시다. CSS의 background 속성을 사용하면 됩니다.

ul {
	background: lightblue;
	padding: 10px;
}

ul li {
	background: pink;
	margin: 10px;
}

<ul>
	<li>버터플라이 케이크</li>
	<li>초콜릿 트레이베이크</li>
	<li>레몬 파운드 케이크</li>
	<li>피넛버터 플랩잭</li>
	<li>초콜릿 머핀</li>
</ul>

이 코드에서는 background 속성으로 순서 없는 리스트를 만드는 <ul> 요소에 연한 파란색 배경을 적용하고, padding 속성으로 10px의 안쪽 여백을 주었습니다.

또한 각 리스트 항목에는 분홍색 배경을 적용하고 10px의 바깥 여백(margin)을 만들었습니다.

이는 위에서 볼 수 있듯이 'ul li' 선택자에 스타일을 포함시켜 구현했습니다. 이 선택자는 <ul> 태그 안에 포함된 모든 <li> 태그에 분홍색 배경과 10px 마진을 적용하겠다는 의미입니다.

마무리

HTML 리스트를 다룰 때 CSS를 활용하면 커스텀 스타일을 적용해 리스트를 훨씬 더 아름답게 만들 수 있습니다. list-style 속성은 CSS에서 리스트에 스타일을 적용하거나 기존 스타일을 제거하는 데 사용됩니다.

이 글에서는 예제와 함께 CSS list-style 속성과 세 가지 하위 속성을 사용하는 방법을 살펴봤으며, 리스트와 리스트 항목에 배경색을 지정하는 방법도 알아봤습니다.

이제 여러분도 프로처럼 CSS로 리스트를 스타일링할 준비가 되었습니다!