Secondary Navigation

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

SECONDARY NAVIGATION

Introduction

What is primary vs secondary navigation?

• primary navigation system에는 일반적으로 사이트의 모든 페이지에 표시해야 하는 가장 중요한 링크와 버튼이 포함된다.
• secondary navigation 또는 breadcrumb navigation은 일반적으로 현재 페이지로 이어진 클릭 가능한 페이지 또는 속성 목록으로 구성된다. 사용자가 사이트의 범위와 현재 위치를 이해하는 데 도움이 된다.
  
  예를 들어, 쇼핑 사이트에는 다음과 같은 신발 한 켤레로 이어지는 breadcrumb(빵가루)이 있다.

Why do we call them breadcrumbs?

헨젤과 그레텔의 이야기에서 아이들이 숲속을 걸을 때 빵 부스러기를 떨어뜨려서 그들이 돌아갈 길을 찾을 수 있도록 한 것에서 착안한듯

Benefit of using breadcrumbs

Breadcrumb navigation은 직접 링크나 검색 결과를 통해 웹 사이트의 임의의 페이지로 이동하는 사용자에게 많은 이점을 제공한다.

사이트에서 무작위로 보이는 페이지에 들어가더라도, 사용자는 이미 그들이 어디에 있는지 알고 있다.

breadcrumb는 또한 사이트의 범위를 암시한다.

위의 예에서 사용자는 사이트에 다른 범주의 신발, 다른 스타일의 신발, 그리고 더 많은 색의 신발이 있다고 생각할 수 있다.

 

breadcrumb는 또한 사용자가 사이트 탐색에서 빠르게 뒤로 점프할 수 있는 방법을 제공한다.

예를 들어, 사용자가 다른 스타일의 신발을 찾아보기를 원하는 경우, "신발" 페이지에서 직접 클릭하고 원하는 스타일로 이동할 수 있다.

 

breadcrumb이 없으면 브라우저에서 "뒤로"를 두 번 클릭하거나 홈 페이지에서 검색을 다시 시작해야한다.

breadcrumb를 사용 여부는 사이트의 종류, 깊이, 복잡성에 따라 판단된다.

Simple Example of Breadcrumbs

사이트에 breadcrumb을 추가함으로써 사용자는 사이트의 현재 위치를 빠르게 파악할 수 있다.

 

breadcrumb은 사이트의 넓이를 암시한다.

사용자가 breadcrumb 구조에서 '패션 > 슈즈'와 같은 것을 본다면, 그 사이트에 신발 외에 다른 의류 아이템이나 액세서리가 들어 있다고 예상할 수 있다.

 

일반적으로 breadcrumb는 페이지의 수평 목록으로 표시되고 최소 공간을 차지한다.

사용자는 header, 왼쪽 정렬 및 기본 탐색기 아래에서 해당 항목을 찾을 수 있다.

(일반적으로 ">" 또는 "/" 기호로 구분)

 

참고

• "+"를 인접 형제 선택자(adjacent sibling combinator)(라고 한다.
  두개의 li는 서로 바로 옆에 있고 동일한 상위가 있는 경우에만 선택된다. 실제로 선택되는 요소는 이 형제 쌍의 두 번째 요소이다.
• 선택기의 ::before 파트가 pseudo-element를 만든다.
  ::before pseudo-element는 종종 content property과 함께 사용되며, 선택한 요소 바로 앞에 표시될 내용을 추가한다.

.breadcrumb li+li::before {
  content: "/";
}

Where do Breadbrumbs Lead

href="#"을 설정할 경우 링크를 클릭하면 페이지가 현재 페이지의 맨 위로 스크롤된다.

 

전체 사이트에서 이러한 breadcrumb는 각각의 페이지로 연결되는데, 이 작업은 href property를 적절한 페이지로 설정하여 수행된다.

 

일반적으로 breadcrumb는 현재 페이지에 상대적이므로, 각 페이지의 breadcrumb 목록은 서로 달라야 한다.

그러나 사용자는 breadcrumb 목록을 이동할 때 breadcrumb 스타일과 목록이 일관성을 유지할 것이라 예상한다.

 

예를 들어 breadcrumb 목록이 다음과 같은 경우:

Fashion > Shoes > Flats > Brown

 

사용자가 "Flats"를 클릭하면 해당 페이지의 Breakcrumb 목록이 다음과 같이 표시된다.

Fashion > Shoes > Flats

 

다음과 같이 범주 또는 순서가 변경되면 사용자가 혼동할 수 있다.

Shoes > Shopping > Flats

Where am I?

이것은 아래 이미지와 같이 표시되는 기본 breadcrumb 구조를 제공한다.

Shopping > Fashion > Shoes > Flats > Brown

Breadcrumb Styles

사용자가 breadcrumb와 상호 작용하도록 하려면 페이지 디자인에서 보다 두드러진 부분으로 만들 수 있다.

 

예시에서는 화살표 효과를 만들기 위해 몇 가지 CSS 트릭을 사용한다.

각 목록 항목 앞뒤에 채워진 직사각형(비어 있는 내용 포함)을 추가하기 위해 ::before 및 ::after pseudo-element을 사용한다.

.breadcrumb li a::before, .breadcrumb li a::after {
  content: "";
  position: absolute;
  border-color: darkcyan;
  border-style: solid;
  border-width: 15px 5px;
}

border 부분을 투명하게 설정하면 화살표의 "꼬리"가 만들어진다.

.breadcrumb li a::before {
  left: -10px;
  border-left-color: transparent;
}

이 효과는 요소 테두리가 요소의 중심에서 그려지기 때문에 작동한다.

화살표의 머리를 그리기 위해 비슷한 CSS를 사용한다.

Breadcrumb Types

breadcrumb의 세가지 주요 유형

• Location
• Attribute
• Path

Shopping > Fashion > Shoes > Flats > Brown

 

location기반의 breadcrumb은  웹 사이트의 navigation 구조에 대한 사용자의 위치를 기준으로 한다.

신발 쇼핑 예제에서 처음 3개의 li 요소는 location 기반이다.

우리는 웹 사이트의 "shoes" 섹션에 있으며, 이 섹션은 "shopping" 섹션에 포함되어 있다.

 

attribute기반의 breadcrumb은 검색 중인 페이지 또는 제품의 속성(attribute) 기반이다.

예제에서 마지막 두 개의 li 요소는 attribute 기반이다.

우리는 "flats"과 "brown"인 신발을 사고 있다.

이러한 attribute의 순서가 규범적이지 않기 때문에 UI에서 동일한 수준으로 표시되는 사이트도 있다.

사용자에게 attribtue 제거를 허용하려면 제거할 수 있음을 나타내는 (x) 버튼 또는 유사한 버튼을 제공해야한다.

 

path(경로) 기반의 breadcrumb는 사이트를 통과하는 사용자의 고유한 경로 기반이다.

예를 들어 홈 페이지에 도착하여 정보 페이지를 탐색하고 마지막으로 등록 페이지를 탐색한 경우, breadcrumb의 형태는 다음과 같이 나타날 수 있다.

Home > About > Register

 

breadcrumb 흔적은 각 사용자와 방문마다 다르다.

다소 복잡한 사이트의 경우 단계 수가 많아진다.

표시를 단순화하기 위해 트레일 시작 부분을 줄여서 사용하는 경우가 많다.

... > About > Register

Breadcrumb Pitfalls

웹 사이트 내에서 secondary navigation 수단으로 breadcrumb를 사용하는 것은 적절하지 않은 경우가 있다.

사용자들은breadcrumb가 특정한 방식으로 행동할 것으로 예상하며 이를 벗어나려는 시도는 사용자를 혼란스럽게 할 수 있다.

대부분의 사용자는 사이트 계층을 노출하거나 현재 있는 페이지의 속성을 표시할 수 있는 breadcrumb를 기대하고 있다.

 

경로 기반 breadcrumb는 사용자의 이동 경로에서 고유하며 일반적으로 구현되지 않는다.

특별한 이유가 있을 때만 이런 종류의 breadcrumb을 사용해야 한다.

 

breadcrumb는 일반적이지만, 사용자가 사이트를 탐색하는 주된 방법은 아니다.

breadcrumb을 유일한 navigation 구조물로 만들어선 안된다.

 

일반적으로 디자인에 관련 없는 것을 추가하지 않는 규칙이 여기에 적용된다.

사이트에 몇 페이지만 포함되어 있거나 primary navigation을 통해 breadcrumb의 페이지를 이미 사용할 수 있는 경우, 디자인에 breadcrumb을 포함할 이유가 거의 없다.

 

.breadcrumb {
  text-align: left;
}

.breadcrumb a {
  float: left;
  color: #fff;
  background: darkcyan;
  text-decoration: none;
  position: relative;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: 15px;
  padding: 0 5px;
}
.breadcrumb .attribute a {
  background-color: inherit;
}
.breadcrumb .location a::before,
.breadcrumb .location a::after {
  content: "";
  position: absolute;
  border-color: darkcyan;
  border-style: solid;
  border-width: 15px 5px;
}

.breadcrumb .location a::after {
  left: 100%;
  border-color: transparent;
  border-left-color: darkcyan;
}
.breadcrumb .location a::before {
  left: -10px;
  border-left-color: transparent;
}

.attribute a{
  color: gray;
}

.breadcrumb .location a:hover {
  background-color: blue;
}
.breadcrumb .location a:hover::before {
  border-color: blue;
  border-left-color: transparent;
}
.breadcrumb .location a:hover::after {
  border-left-color: blue;
}

---

참고