[HTML, CSS, JS] 블러효과를 활용하여 눈에띄는 톡특한 메뉴바 만들기 : CSS backdrop-filter:blur

by
CSS backdrop-filter:blur를 활용한 예제소스

이번 포스팅에서는 CSS의 backdrop-filter:blur 속성을 활용하여 간단하지만 매력적인 메뉴바를 구현하는 방법을 소개합니다.
이 메뉴바는 현대카드를 베이스로 작업하여 이미지와 컨셉을 활용했습니다.
backdrop-filter:blur 속성을 사용함으로써 메뉴바에 심플하면서도 매력적인 느낌을 더해줍니다.

1. 폰트가져오기
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">

처음 두 줄의 코드는 구글 폰트를 가져오기 위한 것입니다. 웹페이지에서 사용할 폰트를 미리 연결하여 사용할 수 있도록 하는 코드입니다.

2. 메뉴바 및 이미지 추가
<div id="content">
  <img src="https://images.unsplash.com/photo-1688304437278-c7d4863ca4fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80">
  <!-- 메뉴바 구현을 위한 요소들이 여기에 위치 -->
</div>

<div id=”content”> 안에 이미지와 메뉴바를 구성해줍니다.

3. 메뉴바
<div id="header">
  <div class="top-bar">
    <a href="/"><img src="https://www.hyundaicard.com/docfiles/resources/pc/images/common/logo/logo_hyundaicard_scr.svg"></a>
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="header-menu">
    <!-- 메뉴바의 각 섹션들이 여기에 위치 -->
  </div>
</div>

메뉴바는 여러 개의 상자(box)로 구성되어 있습니다.
각 상자에는 텍스트와 링크(<a> 태그)가 포함되어 있으며, 섹션 별로 “card”, “benefits”, “Customer”와 같은 헤더가 포함되어 있습니다. 또한, 메뉴바의 상단에 로고와 플러스 아이콘이 있는 상단바(top-bar)가 있습니다.

4. 최종 HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<div id="content">
  <img src="https://images.unsplash.com/photo-1688304437278-c7d4863ca4fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80">
  <div id="header">
    <div class="top-bar">
      <a href="/"><img src="https://www.hyundaicard.com/docfiles/resources/pc/images/common/logo/logo_hyundaicard_scr.svg"></a>
      <i class="fa-solid fa-plus"></i>
    </div>
    <div class="header-menu">
      <div class="box">
        <p>card</p>
        <a href="#">카드 신청</a>
        <a href="#">카드파인더</a>
        <a href="#">바로발급서비스</a>
        <a href="#">카드 발급 조회</a>
        <a href="#">카드 수령 등록</a>
      </div>
      <div class="box">
        <p>bnefits</p>
        <a href="#">보유 포인트</a>
        <a href="#">바우처</a>
        <a href="#">받은 혜택</a>
        <a href="#">GOOD FRIENDSHIP</a>
        <a href="#">마일리지 긴급충전</a>
      </div>
      <div class="box">
        <p>Customer</p>
        <a href="#">홈페이지 상담</a>
        <a href="#">ARS 상담</a>
        <a href="#">FAQ</a>
      </div>
      <div class="box">
        <img src="https://img.hyundaicard.com/img/com/card/card_NXHC_h.png">
      </div>
      <div class="wb">image by hyundai card</div>
    </div>
  </div>
</div>

보러가기

CSS 속성 부여하기
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}
body {
  width: 100%;
  background: #e8ebf3;
  font: 0.75em Roboto Mono, Noto Sans KR, sans-serif;
}
#content {
  width: 100%;
  height: 100vh;
  position: relative;
}
#content img {
  width: 100%;
}
#header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -0%);
  width: 800px;
  height: 50px;
  backdrop-filter: blur(15px);
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s;
}

#header.open {
  height: 500px;
}
#header .top-bar {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header .top-bar img {
  filter: invert(1);
}
#header .top-bar i {
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
  transform: rotate(0deg);
}
#header.open .top-bar i {
  transform: rotate(135deg);
}
#header .header-menu {
  box-sizing: border-box;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
#header .header-menu .box {
  width: 25%;
}
#header .header-menu .box p {
  font-size: 14px;
  padding: 0 0 20px;
}
#header .header-menu .box a {
  font-size: 14px;
  display: block;
  padding: 0 0 20px;
}

#header .header-menu .wb {
  width: 100%;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s;
}
#header.open .header-menu .wb {
  opacity: 1;
}
  • 기본 스타일 초기화: 전체 문서(*)에 대한 기본 스타일을 초기화합니다. 여기서는 margin, padding, text-decoration, color, text-transform 등의 속성을 초기화하여 모든 요소가 일관된 스타일을 가지도록 합니다.
  • body 스타일: body 요소에 대한 스타일을 설정합니다. 배경색은 #e8ebf3으로 지정하고, 폰트는 Roboto Mono, Noto Sans KR, sans-serif 순서로 적용됩니다.
  • #content 스타일: #content는 메뉴바와 이미지를 감싸는 부모 요소로, 100vh(뷰포트 높이)의 높이를 가지며 상대적인 위치인 relative로 설정됩니다.
  • #content img 스타일: #content 안의 이미지에 대한 스타일을 설정합니다. 이미지가 부모 요소의 100% 너비를 갖도록 지정합니다.
  • #header 스타일: #header는 메뉴바를 감싸는 요소로, 메뉴바의 스타일을 설정합니다. 메뉴바의 초기 높이는 50px이며, 초기 위치는 페이지 상단의 중앙에 위치합니다. 블러효과를 주기 위해 backdrop-filter: blur(15px)를 사용하고, 배경색은 rgba(255, 255, 255, 0.2)로 설정됩니다.
  • #header.open 스타일: 메뉴바가 확장될 때(#header 요소에 “open” 클래스가 추가될 때)의 스타일을 설정합니다. 높이가 500px로 늘어나도록 설정되어 있으며, 메뉴 아이콘(i 요소)가 135도로 회전하도록 지정합니다.
  • #header .top-bar 스타일: 상단바를 감싸는 .top-bar 요소의 스타일을 설정합니다. .top-bar는 로고 이미지와 메뉴 아이콘을 가로로 정렬합니다.
  • #header .header-menu 스타일: 메뉴 항목들을 감싸는 .header-menu 요소의 스타일을 설정합니다. flex를 사용하여 항목들을 가로로 정렬하고, 간격을 띄우며 여러 줄로 표시되도록 설정합니다.
  • #header .header-menu .box 스타일: 메뉴 항목들을 감싸는 .box 요소의 스타일을 설정합니다. 너비는 25%로 지정하여 네 개의 항목이 한 줄에 나타나도록 합니다.
  • #header .header-menu .box p 스타일: .box 안에 있는 헤더(p 요소)의 스타일을 설정합니다. 폰트 크기와 패딩을 지정합니다.
  • #header .header-menu .box a 스타일: .box 안에 있는 링크(a 요소)의 스타일을 설정합니다. 폰트 크기와 패딩을 지정하여 링크들 사이에 간격을 주고, 클릭 가능한 블록으로 만듭니다.
제이쿼리(jQuery) 이벤트
$("#header i").click(function () {
  $(this).parents("#header").toggleClass("open");
});

메뉴바의 아이콘을 클릭하면 메뉴바가 확장되거나 축소되는 기능을 추가합니다.
클릭 이벤트를 감지하여 화살표 아이콘을 클릭할 때마다 부모 요소에(#header) “open” 클래스를 토글하여 메뉴바의 높이를 확장하거나 축소합니다. 이렇게 하면 사용자가 필요할 때마다 메뉴를 간편하게 열고 닫을 수 있습니다.

결과보기(풀페이지)

이번 튜토리얼에서는 매력적인 메뉴바를 구현하는 방법에 대해 살펴보았습니다.
CSS의 backdrop-filter:blur 속성을 활용하여 심플하지만 독특하고 매력적인 메뉴바를 만들었습니다.

웹 개발에서는 디자인과 기능을 조화롭게 결합하여 사용자들에게 더 나은 사용자 경험을 제공하는 것이 중요합니다. 매력적인 디자인과 편리한 기능을 구현하는 것은 사용자들에게 더욱 매혹적인 웹사이트를 만드는 데에 큰 도움이 됩니다.

Leave a Comment

%d