HTML과 CSS를 사용하여 탐색 모음을 만드는 방법

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

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

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

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <style>
      body {
        background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
        height: 100vh;
        margin: 0;
        padding-top: 10px;
      }

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

      .logo {
        width: 12rem;
      }

      .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;
      }

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

      button:hover {
        background-color: #fd2df3;
      }
    </style>
  

  
    <nav class="navbar">
      <img src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png" alt="HTML과 CSS를 사용하여 탐색 모음을 만드는 방법" class="logo">

      <ul class="menu">
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About Us</a></li>
        <li class="item"><a href="#">Contact Us</a></li>
        <li class="item"><a href="#">Blog</a></li>
      </ul>

      <button type="submit">Call Now</button>
    </nav>
  

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

HTML 구조

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

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

<nav class="navbar">
  <img src="logo-url" alt="HTML과 CSS를 사용하여 탐색 모음을 만드는 방법" class="logo">
  <ul class="menu">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Contact Us</a></li>
    <li class="item"><a href="#">Blog</a></li>
  </ul>
  <button type="submit">Call Now</button>
</nav>

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

)

을 포함하는 순서가 지정되지 않은 목록 (

)

이며 각 목록 항목에는 앵커 태그 가 있습니다. () 다른 페이지에 대한 링크를 생성합니다. 마지막으로 버튼은 스타일링이 적용된 심플한 태그입니다.

CSS를 사용한 스타일링

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

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

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

탐색바 스타일링

navbar는 흰색 배경과 둥근 모서리를 가지고 있습니다(테두리 반경: 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-index: 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), 흰색 텍스트, 둥근 모서리(테두리 반경: 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;
}

위 내용은 HTML과 CSS를 사용하여 탐색 모음을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!