CSS list-style property

정보를 구조화하여 보여주는 CSS 리스트(list-style) 속성에 대해 알아보겠습니다.

이 속성은 불릿(bullet)의 모양을 바꾸거나, 이미지를 사용하고, 번호의 위치를 조정하는 등 목록의 스타일을 결정합니다.

---

1. list-style-type (마커의 모양)

목록 아이템 앞에 붙는 마커(불릿이나 숫자)의 종류를 지정합니다.

• 순서 없는 리스트 (<ul>): disc(기본 원형), circle(빈 원형), square(사각형), none(제거) 등을 사용합니다.
• 순서 있는 리스트 (<ol>): decimal(숫자), lower-alpha(소문자 알파벳), upper-roman(대문자 로마자) 등을 사용합니다.

---

2. list-style-image (마커를 이미지로 변경)

기본 마커 대신 사용자가 준비한 이미지를 불릿으로 사용할 수 있게 합니다.

• 사용법: url() 함수를 이용해 이미지 경로를 지정합니다.
• 주의: 이미지 크기를 CSS 내에서 직접 조절하기 어렵기 때문에, 미리 작은 사이즈로 편집된 이미지를 사용하는 것이 좋습니다.

CSS

 

ul {
  list-style-image: url('star-icon.png');
}

---

3. list-style-position (마커의 위치)

마커가 목록 아이템의 안쪽(inside)에 위치할지, 바깥쪽(outside)에 위치할지 결정합니다.

• outside: 마커가 본문 영역 밖에 위치합니다. 글자가 길어져 줄 바꿈이 되어도 마커의 위치는 고정되어 깔끔하게 정렬됩니다. (기본값)
• inside: 마커가 본문 영역 안으로 들어옵니다. 줄 바꿈이 되면 마커 바로 아래까지 글자가 채워집니다.

---

4. list-style (축약형 속성)

위에서 설명한 세 가지 속성(type, position, image)을 한 줄로 줄여서 쓸 수 있습니다.

• 구문: list-style: [type] [position] [image];
• 보통은 이미지까지 쓰기보다는 list-style: none;을 사용하여 기본 스타일을 제거한 뒤, 커스텀 디자인을 입힐 때 가장 많이 활용합니다.

---

🖥️ 실전 예제 코드

HTML

 

<style>
  /* 1. 기본 불릿 제거 및 위치 설정 */
  .custom-list {
    list-style: square inside;
    background-color: #f9f9f9;
    padding: 20px;
  }

  /* 2. 내비게이션 바 등을 만들 때 불릿 제거 */
  .nav-menu {
    list-style: none; /* 불릿을 아예 없앰 */
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
  }
</style>

<ul class="custom-list">
  <li>첫 번째 항목 (안쪽 사각형)</li>
  <li>두 번째 항목 (안쪽 사각형)</li>
</ul>

<ul class="nav-menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

---

📋 리스트 주요 속성 요약표

속성	설명	주요 값 예시
list-style-type	마커 모양 결정	disc, decimal, none
list-style-image	커스텀 이미지 마커	url('icon.png')
list-style-position	마커 배치 위치	inside, outside
list-style	위 속성들의 축약형	none, circle inside

---

학습 정리 > * 실무에서는 브라우저의 기본 스타일을 없애기 위해 **list-style: none;**을 정말 자주 사용합니다.

• 불릿 대신 더 세련된 아이콘을 넣고 싶다면 list-style-image보다는 **가상 요소(::before)**를 활용하는 것이 위치 제어에 더 유리합니다.

---

목록을 보기 좋게 꾸미는 리스트 속성을 정복하셨습니다!

---