<!-- PC 버전 -->
<div class="navbar_main">
  <a class="navbar_logo" href="#">로고</a>
  <div class="navbar_links">
    <a href="#">ABOUT</a>
    <a href="#">WORKS</a>
    <a href="#">NEWS</a>
    <a href="#">CONTACT</a>
  </div>
</div>
/* PC 버전 */
.navbar_main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  color: #000;
  z-index: 999;
  animation: navbarBottom 1s forwards;
}

.navbar_links {
  margin-right: 10%;
}

.navbar_links a {
  text-decoration: none;
  color: #000;
  margin-right: 4rem;
  font-size: 0.9rem;
  font-weight: 600;
  position: relative;
  padding: 0.5rem 0;
}

.navbar_links a:last-child {
  margin-right: 0;
}

.navbar_links a::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #792626;
  transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
}

.navbar_links a:hover::before {
  width: 100%;
  left: 0;
}

.navbar_logo {
  margin-left: 10%;
  text-decoration: none;
  color: #000;
  font-size: 2.3rem;
  font-weight: 500;
}

.navbar_scroll {
  background-color: #fff;
  z-index: 5;
  border-bottom: 1px solid gray;
}

.navbar_scroll div a {
  color: black;
}

.navbar_scroll a {
  color: black;
}

@keyframes navbarBottom {
  0% {
    transform: translateY(-70%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.