CSS로 ul 목록의 글머리 기호(불릿) 제거하는 방법

웹 페이지에서 순서 없는 목록(<ul>)은 기본적으로 동그란 글머리 기호(bullet point)가 자동으로 적용됩니다. 하지만 내비게이션 메뉴 같은 컴포넌트를 만들 때는 이 글머리 기호가 오히려 방해가 되곤 하는데요. 이럴 때 CSS만으로 간단하게 불릿을 제거할 수 있습니다.

내비게이션 메뉴의 일반적인 HTML 구조

웹사이트에서 흔히 볼 수 있는 내비게이션(메뉴) 컴포넌트는 보통 다음과 같은 HTML 구조로 작성됩니다.

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

CSS로 글머리 기호 제거하기

메뉴 항목에서 글머리 기호를 없애려면 브라우저의 기본 스타일인 list-style-type: disc;를 재정의하여 none으로 변경하면 됩니다.

nav ul {
  list-style-type: none;
}

참고: 위 코드처럼 타입 선택자인 ul과 nav를 조합하면 해당 내비게이션 컴포넌트에만 선택적으로 스타일이 적용됩니다. 만약 단순히 ul { ... }로 작성하면 웹사이트 전체의 모든 순서 없는 목록에서 글머리 기호가 사라지므로 주의해야 합니다.

추가 팁: 기본 여백도 함께 초기화하기

브라우저는 <ul> 요소에 왼쪽 패딩(padding)도 기본값으로 부여합니다. 글머리 기호만 제거하면 메뉴가 의도치 않게 들여쓰기 된 것처럼 보일 수 있으므로, 실무에서는 아래처럼 여백까지 함께 초기화하는 것이 좋습니다.

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

이렇게 하면 깔끔하게 정렬된 내비게이션 메뉴를 만들 수 있습니다.