잘 디자인되고 기능적인 탐색 모음(navbar)은 모든 웹사이트의 핵심 구성 요소 중 하나입니다. 이는 사용자를 위한 로드맵 역할을 하여 다양한 페이지를 탐색하는 데 도움을 줍니다. 탐색 모음은 일반적으로 웹페이지 상단에 위치하며 사용자가 주요 링크에 액세스할 수 있도록 항상 표시됩니다. 이 글에서는 HTML과 CSS를 사용하여 시각적으로 매력적이고 기능적인 CSS 네비게이션 바를 만드는 방법을 살펴보겠습니다. 또한 탐색 표시줄을 페이지 상단에 유지하는 다양한 기술에 대해서도 논의하겠습니다.

이 탐색 모음의 라이브 데모를 확인하고 CodePen의 미리 보기를 방문하여 기능을 살펴볼 수 있습니다.

다음 코드 스니펫은 로고, 메뉴 항목, 클릭 유도 문구 버튼이 포함된 반응형 탐색 메뉴를 만드는 방법을 보여줍니다. HTML 및 CSS 코드는 다음과 같습니다.

코드 분석
HTML과 CSS를 사용하여 navbar가 어떻게 생성되는지 자세히 살펴보겠습니다.

HTML 구조

코드의 HTML 부분은 간단합니다. 이는 세 가지 주요 구성요소를 포함하는 탐색 요소로 구성됩니다:

• 로고 (이미지)
• 클릭 가능한 링크가 포함된 **메뉴 **목록(홈, 회사 소개, 문의처, 블로그)
• 클릭 유도문안 역할을 하는 **버튼 **(지금 전화)
• 구조는 탐색 모음의 컨테이너 역할을 하는 요소 내부에 래핑됩니다.

로고는 태그를 사용하여 생성됩니다. 메뉴는 목록 항목 (

)

CSS를 사용한 스타일링

내비게이션 바의 레이아웃과 모양을 정의하는 CSS 섹션에서 마법이 일어납니다. 몇 가지 핵심 요소에 대해 논의해 보겠습니다.

배경 및 바디 스타일링
본문에는 파란색 (#2258c3)에서 분홍색 (#fd2df3)으로 전환되는 그라데이션 배경이 있습니다. 높이는 100vh(뷰포트 높이)로 설정되어 배경이 전체 화면을 채우고 페이지 주위에 불필요한 공간이 생기지 않도록 여백이 없습니다.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

탐색바 스타일링

navbar는 흰색 배경과 둥근 모서리를 가지고 있습니다(border-radius: 30px). 패딩과 여백은 탐색 모음 내부와 외부에 간격을 만듭니다. display: flex 속성은 navbar를 flexbox로 만들어 하위 요소의 수평 정렬을 허용합니다. justify-content: space-between은 로고, 메뉴, 버튼의 간격을 균등하게 유지합니다.

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Navbar를 상단에 고정하기

내비게이션 바의 주요 기능 중 하나는 스크롤하는 동안 페이지 상단에 머무르는 것입니다. 이를 달성하기 위해 position: 고정 속성을 사용합니다. 이렇게 하면 탐색 모음이 스크롤에 관계없이 상단(top: 0)에 고정된 상태로 유지됩니다. 또한, Z-색인: 9999는 탐색 표시줄이 항상 페이지의 다른 요소 위에 위치하도록 보장합니다.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

메뉴 항목 및 상호 작용

메뉴 항목은 .menu 클래스의 display: flex를 사용하여 가로로 표시됩니다. 항목에는 여백을 통해 간격이 지정되고 각 항목에는 기본 목록 스타일과 패딩을 제거하도록 스타일이 지정됩니다. 메뉴 항목 내의 링크에는 텍스트 장식이 없으며 굵은 글꼴과 어두운 색상으로 스타일이 지정됩니다.

링크에 마우스를 올리면 파란색 배경 색상과 일치하도록 색상이 변경되어(#2258c3) 링크가 대화형이라는 시각적 단서를 제공합니다.

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

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

버튼 스타일링

버튼의 스타일은 파란색 배경(#2258c3), 흰색 텍스트, 둥근 모서리(border-radius: 20px)입니다. 마우스를 올리면 배경의 그라데이션과 일치하도록 배경이 분홍색(#fd2df3)으로 변경됩니다.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

Navbar를 항상 상단에 유지하는 방법

CSS를 사용하여 페이지 상단의 헤더를 수정하려면 top: 0과 함께 position: 고정 속성을 사용합니다. 이렇게 하면 사용자가 스크롤할 때 navbar가 상단에 유지됩니다. 코드에 적용되는 방법은 다음과 같습니다.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}