[css] CSS 투명한 네비게이션 바 디자인

26 Dec 2023

웹 사이트에서 투명한 네비게이션 바는 모던하고 세련된 느낌을 줄 수 있습니다. CSS를 사용하여 투명한 네비게이션 바를 만드는 방법에 대해 알아보겠습니다.

HTML 마크업

먼저 아래와 같이 기본적인 HTML 마크업을 작성합니다.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS 스타일링

이제 CSS를 사용하여 네비게이션 바를 투명하게 디자인합니다.

nav {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

nav ul {
  list-style: none;
  text-align: right;
}

nav ul li {
  display: inline;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

nav ul li a:hover {
  color: #00bcd4;
}

결론

위의 코드를 사용하면 투명한 배경을 가진 네비게이션 바를 만들 수 있습니다. 이 기술을 사용하여 웹사이트에 섬세한 디자인을 추가할 수 있습니다.

참고 자료: