Bootstrap - 나비좌표: 초보자 가이드

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 Bootstrap 나비좌표의 세상으로 뛰어들어 볼 거예요. 나비좌표라는 이름을 들어본 적이 없으시다면 걱정 마세요 - 이 튜토리얼이 끝나면 프로처럼 만들 수 있을 거예요! 이 흥미로운 여정을 함께 시작해 보세요.

Bootstrap - Breadcrumb

나비좌표는 무엇인가요?

코드로 들어가기 전에 나비좌표가 무엇인지 이해해 보겠습니다. 거대한 숲을 탐험 중이라고 상상해 보세요 (인터넷이 가끔 느껴지는 것처럼). 나비좌표가 있어서 길을 잃지 않고 돌아갈 수 있었으면 좋지 않을까요? 그게 바로 웹 디자인에서 나비좌표가 하는 일입니다!

나비좌표는 사용자가 웹사이트의 계층 구조 내에서 현재 위치를 알 수 있도록 돕는 导航 보조 도구입니다. 보통 페이지 상단에 줄로 표시되며, 사용자가 쉽게 상위 페이지로 돌아가는 데 도움을 줍니다.

Bootstrap 나비좌표를 사용하는 이유는 무엇인가요?

우리의 친구이자 CSS 프레임워크인 Bootstrap은 나비좌표를 만드는 데 큰 도움을 줍니다. 미리 스타일이 지정된 컴포넌트를 제공하여 우리가 쉽게 웹 페이지에 구현할 수 있습니다. 따라서轮을 다시 만드는 대신, Bootstrap의 미리 만들어진 나비좌표를 사용하고 마음대로 수정할 수 있습니다!

이제 손을 놓고 코딩을 시작해 보겠습니다!

기본 나비좌표

단계 1: Bootstrap 설정

먼저, HTML 파일에 Bootstrap을 포함시켜야 합니다. HTML의 <head> 섹션에 다음 줄을 추가하세요:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

이렇게 하면 Bootstrap CSS와 JavaScript 파일을 문서에 연결합니다.

단계 2: 기본 나비좌표 만들기

이제 우리의 첫 번째 나비좌표를 만들어 보겠습니다! 다음은 기본 구조입니다:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

이를 해부해 보겠습니다:

우리는 나비좌표를 <nav> 요소로 감싸고 aria-label="breadcrumb"를 추가하여 화면 독자의 접근성을 높입니다.
<ol> 요소에 breadcrumb 클래스를 추가하여 나비좌표 컨테이너를 만듭니다.
각 <li> 요소는 나비좌표 계층 구조의 한 단계를 나타냅니다.
breadcrumb-item 클래스는 각 항목을 스타일링합니다.
마지막 항목은 active 클래스와 aria-current="page"를 가지고 있어 현재 페이지를 나타냅니다.

브라우저에서 이를 봤을 때, 깔끔한 나비좌표 트레일을 볼 수 있습니다: Home > Library > Data

단계 3: 링크 추가

나비좌표를 기능적으로 만들기 위해 적절한 링크를 추가해야 합니다. 코드를 수정해 보겠습니다:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="library.html">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

이제 "Home"을 클릭하면 index.html로, "Library"를 클릭하면 library.html로 이동합니다. 현재 페이지("Data")는 링크가 없기 때문에 현재 위치입니다.

분리기

기본적으로 Bootstrap은 나비좌표 항목 사이에 전진 슬래시 (/)를 사용합니다. 하지만 다른 것을 사용하고 싶다면 어떻게 할까요? 우리는 분리기를 사용하는 방법을 탐구해 보겠습니다!

CSS를 사용한 커스텀 분리기

분리기를 CSS로 변경할 수 있습니다. 다음은 방법입니다:

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

이 예제에서 우리는 분리기를 ">" 기호로 변경했습니다.

아이콘을 분리기로 사용하기

보다 화려한 방법을 원하신다면 아이콘을 분리기로 사용해 보세요! 이 예제에서는 Font Awesome 아이콘을 사용합니다:

<!-- Font Awesome를 HTML head에 포함시키세요 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- 나비좌표 HTML -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item">
<i class="fas fa-chevron-right"></i>
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="fas fa-chevron-right"></i>
Data
</li>
</ol>
</nav>

여기서 우리는 --bs-breadcrumb-divider를 빈 문자열로 설정하고, Font Awesome의 chevron 아이콘을 나비좌표 항목 사이에 수동으로 추가했습니다.

나비좌표의 좋은 관행

이제 나비좌표를 만들고 커스터마이징하는 방법을 알았으니, 몇 가지 좋은 관행에 대해 이야기해 보겠습니다:

간단하게 유지하세요: 나비좌표 트레일에 모든 페이지를 포함하지 마세요. 주요 카테고리에 국한하세요.
명확한 레이블 사용: 나비좌표 레이블이 간결하고 설명적이도록 하세요.
단일 레벨 웹사이트에서는 사용하지 마세요: 나비좌표는 명확한 계층 구조가 있는 사이트에서 가장 유용합니다.
상단에 배치하세요: 나비좌표는 일반적으로 페이지 상단에, 주요 导航 바 아래에 배치됩니다.

결론

축하합니다! 이제 Bootstrap 나비좌표를 만들고 커스터마이징하는 방법을 배웠습니다. 기본 구현에서 화려한 분리기까지, 사용자가 웹사이트를 통해 안전하게 이동할 수 있도록 도와주는 방법을 배웠습니다.

나비좌표는 디지털 숲에서의 안내 표지입니다. 사용자가 현재 위치를 이해하고 어디로 돌아갈 수 있는지 알려줍니다. 지혜롭게 사용하면 사용자가 사이트를 통해의 여정을 쉽게 할 수 있도록 도와줄 것입니다.

계속 연습하고, 탐험하고, 가장 중요한 것은 웹 개발을 즐기세요. 다음 번에 만날 때까지, 즐거운 코딩하세요!

방법	설명
기본 나비좌표	`<nav>`, `<ol>`, `<li>` 요소와 Bootstrap 클래스 사용
커스텀 분리기	`--bs-breadcrumb-divider` CSS 변수 사용
아이콘 분리기	Font Awesome나 다른 아이콘 라이브러리 사용
접근성	`aria-label`과 `aria-current` 속성 사용

Credits: Image by storyset