CSS 탐색경로(Breadcrumb) 만들기

게시일: 24. 11. 08. 수정일: 24. 12. 24.

소요 시간: 5분 조회수: 46

웹 페이지에 breadcrumbs(탐색 경로)를 CSS로 만드는 방법을 연습했다. 이 기능은 사용자가 웹사이트에서 현재 위치와 탐색 경로를 쉽게 이해하도록 돕는 데 필수적이다. 처음에는 HTML 구조부터 시작했다.

먼저 <nav> 요소로 시작했는데, 이 요소는 탐색 경로를 감싸기 위해 사용한다. 탐색 경로임을 명시하기 위해 aria-label="Breadcrumb" 속성을 추가했다.

각각의 항목은 <ol>로 감싸고 <li> 요소로 구성했다. 예시로 Home, Products, Electronics, 그리고 현재 페이지인 Smartphones를 포함했다.

마지막 항목은 현재 페이지를 나타내기 때문에 aria-current="page" 속성을 사용했다.

HTML은 이렇게 작성했다.

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/products">Products</a></li>
    <li class="breadcrumb-item"><a href="/electronics">Electronics</a></li>
    <li class="breadcrumb-item active" aria-current="page">Smartphones</li>
  </ol>
</nav>

그 다음 CSS로 스타일을 변경했다.

.breadcrumb {
  list-style: none; /* 기본 목록 스타일 제거 */
  display: flex;    /* 수평 정렬 */
  padding: 0;
  margin: 0;
}

먼저 list-style: none;을 사용해 기본적으로 보이는 목록 점을 제거했다. 탐색 경로는 일반적인 목록과 달리 점이나 숫자가 필요하지 않기 때문에 깔끔하게 제거해주었다. 그리고 탐색 경로가 한 줄로 정렬되도록 display: flex;를 적용했다. 이렇게 하면 <li> 요소들이 가로로 배치된다. 패딩과 마진을 0으로 설정한 것도 정렬을 좀 더 매끄럽게 만들기 위한 것이다.

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";    /* 항목 구분자 */
  margin: 0 8px;   /* 구분자 양쪽 여백 */
  color: #6c757d;  /* 구분자의 색상 */
}

각각의 탐색 경로 항목은 .breadcrumb-item 클래스로 스타일링했다. 추가적인 스타일은 크게 없었지만, 구분자를 추가하기 위해 가상 요소를 사용했다. CSS에서 + 선택자는 특정 요소 뒤에 오는 형제를 선택할 때 유용하다. 나는 .breadcrumb-item + .breadcrumb-item::before를 통해 두 번째 이후의 모든 항목 앞에 구분자를 추가했다. content: ">"로 화살표를 사용했는데, 이 부분은 다른 심볼이나 텍스트로도 바꿀 수 있다. 구분자와 항목 사이의 간격은 margin: 0 8px;으로 조정해 텍스트가 겹치지 않도록 했다.

.breadcrumb-item a {
  text-decoration: none; /* 기본 밑줄 제거 */
  color: #007bff;        /* 파란색 링크 */
}

.breadcrumb-item a:hover {
  text-decoration: underline; /* 마우스 호버 시 밑줄 추가 */
}

링크 스타일링도 중요했다. 탐색 경로에서 대부분의 항목은 링크로 되어 있어 사용자 상호작용을 염두에 두었다. text-decoration: none;으로 기본 밑줄을 제거하고, color: #007bff;로 파란색을 설정해 링크임을 명확히 했다. 사용자가 링크 위에 마우스를 올릴 때 밑줄이 나타나도록 :hover 상태도 추가했다. 이렇게 하면 시각적으로 클릭 가능한 항목임을 강조할 수 있다.

.breadcrumb-item.active {
  color: #6c757d;           /* 회색으로 스타일링 */
  pointer-events: none;     /* 클릭 불가능 처리 */
}

마지막으로, 현재 페이지는 강조되거나 상호작용이 필요하지 않다. .breadcrumb-item.active 클래스는 현재 위치한 페이지를 스타일링한다. 회색 톤(color: #6c757d;)으로 설정해 링크가 아닌 점을 강조했고, pointer-events: none;을 추가해 클릭이 불가능하도록 처리했다.

전체 코드는 다음과 같다.

.breadcrumb {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.breadcrumb-item {
  margin: 0;
  padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  margin: 0 8px;
  color: #6c757d; /* 화살표 구분자의 회색 톤 */
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff; /* 링크의 파란색 */
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #6c757d;
  pointer-events: none; /* 현재 페이지는 클릭할 수 없음 */
}

이렇게 HTML과 CSS를 조합해 탐색 경로를 만들었다. 구분자를 다른 기호로 바꾸거나 색상을 다르게 설정하는 등 다양한 변형이 가능했다는 점도 재미있었다.

앞으로 더욱 정교한 탐색 경로를 만들 때 이 기본 스타일링을 활용할 수 있을 것 같아 기대된다. CSS가 얼마나 다양한 방식으로 사용자 경험을 향상시킬 수 있는지를 체감할 수 있는 좋은 기회였다.

CSS 탐색경로(Breadcrumb) 만들기

인기글