Logo

CSS 리스트 스타일링 가이드 (HTML <ul>, <ol>, <li> 요소)

이번 포스팅에서는 HTML의 <ul> 또는 <ol> 요소로 마크업이 되는 리스트(list)와 <li>로 마크업되는 리스트 아이템(list item)을 CSS로 스타일하는 방법에 대해서 알아보겠습니다.

HTML 코드 작성

HTML에서 리스트는 <ul> 또는 <ol> 요소로 마크업 할 수 있는데요. 순서가 중요하지 않은 경우에는 <ul> 요소를 사용하고, 순서한 중요한 경우에는 <ol> 요소를 사용해야 합니다.

그럼 지금부터 다음과 같이 간단한 중첩 리스트를 같이 스타일해보도록 하겠습니다.

<ul>
  <li>재밌게 놀기</li>
  <li>
    맛있게 먹기
    <ol>
      <li>아침</li>
      <li>점심</li>
      <li>간식</li>
      <li>저녁</li>
      <li>야식</li>
    </ol>
  </li>
  <li>편하게 자기</li>
</ul>

브라우저 기본 링크 스타일링

우리가 굳이 스타일해주지 않더라도 대부분의 브라우저에서는 리스트를 유관으로 알아보기 쉽도록 최소한의 스타일을 적용해주는데요. 보통 이렇게 브라우저 자체에 내장된 기본 스타일을 User Agent Stylesheet이라고도 부릅니다.

크롬 브라우저의 예로 들면 <ul>, <ol>, <li> 요소에 각각 아래와 같은 기본 스타일이 적용된 것을 확인할 수 있습니다.

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

우선 <ul>과 <ol> 요소에 적용된 CSS 규칙은 list-style-type 속성을 제외하면 대동소이한 것을 알 수 있습니다. list-style-type 속성은 해당 리스트 내의 각 아이템 앞 부분에 붙는 소위 불릿(bullet)이라고도 불리는 마커(marker)의 모습 결정하는데요. 기본적으로 <ul> 요소 안에서 <li> 요소 앞에 둥근 점(disc)이 나타나고, <ol> 요소 안에서는 <li> 요소 앞에 숫자(decimal)이 나타나게 됩니다.

또 한 가지 주의 깊게 볼 부분은 <ul>과 <ol> 요소에 동일한 크기의 내외부 공백이 적용된다는 점인데요. 특히, 좌측에만 40px의 padding을 줌으로써 중첩 리스트에서 자연스럽게 들여쓰기 효과가 나게 됩니다. 즉, 리스트가 한 단계씩 깊어질 수록 40px 씩 좌측에 내부 공백이 늘어나서 시각적으로 리스트의 구조를 파악하기가 수월해집니다.

리스트 레이아웃 조정

먼저 리스트의 전반적인 레이아웃을 조정해주면 좋을 것 같은데요.

리스트 아이템 간 상하 간격이 너무 좁게 느껴진다면 line-height 속성을 사용해서 아이템 사이 간격을 늘려줄 수 있습니다. 그리고 들여쓰기가 너무 많이 되는 것 같다면, padding-inline-start 혹은 padding-left 속성을 사용해서 들여쓰기 정도를 줄일 수 있습니다. 마지막으로 margin 속성을 사용해서 리스트 위아래의 불필요한 외부 공백을 제거해줄 수 있습니다.

ul,
ol {
  line-height: 1.8;
  margin: 0;
  padding-inline-start: 1.5em;
}

마커 위치 바꾸기

마커는 기본적으로 리스트 외부에 위치하지만 리스트 내부로 옮길 수도 있는데요. 바로 다음과 같이 list-style-position 옵션을 inside로만 바꿔주면 됩니다.

ul,
ol {
  list-style-position: inline;
}

마커 모양 바꾸기

기본적으로 <ul>은 둥근 점을 마커로 사용하고, <ol>은 숫자를 마커로 사용하는데요. list-style-type 속성을 사용하면 마커 모양을 바꿀 수 있습니다.

예를 들어, <ul>의 마커 모양을 사각형 점으로 바꾸고, <ol>의 마커 모양을 알파벳 대문자로 바꿔볼까요?

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-alpha;
}

이미지 마커 사용하기

list-style-image 속성을 사용하면 정해진 마커 모양 대신에 이미지를 마커로 사용할 수 있습니다.

예를 들어, <ol>의 마커 모양을 체크 이미지로 바꿔보겠습니다.

ol {
  list-style-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><polyline points='20 6 9 17 4 12'></polyline></svg>");
}

참고로 list-style-image 속성을 사용하더라도 list-style-type 속성을 명시해주는 것이 좋습니다. 어떤 사유로든 이미지가 깨지거나, 브라우저에서 이미지를 내려받기를 실패한 경우에는 list-style-type 속성에 명시된 마커 모양이 사용되기 때문입니다.

마커 세부 스타일링

CSS 규격에 비교적 최근에 추가된 ::marker 의사 요소(pseudo element)를 활용하면 마커를 상대로 세부 스타일이 가능해집니다. 기존에는 마커를 숨기거나, ::before 의사 요소를 사용하는 등 온갖 편법을 동원했었는데 말이죠.

예를 들어, 마커의 색을 토마토색으로 바꾸고, 글꼴 크기와 두께를 살짝 조정해보겠습니다.

li::marker {
  color: tomato;
  font-size: 0.9em;
  font-weight: bold;
}

마치면서

지금까지 CSS로 리스트를 스타일하는 방법에 대해서 알아보았습니다. HTML에서 <ul>, <ol>, <li> 요소의 사용 빈도가 매우 높지만 않지만 그래도 웹사이트를 만들 때 빠질 수 없을 것입니다. 다른 HTML 요소에서 사용하지 않는 특별한 CSS 속성이 많이 사용되기 때문에 따로 정리해보았는데 도움이 되었으면 좋겠습니다.

messageCircle