[css] CSS 투명한 헤더 디자인

26 Dec 2023

투명한 헤더는 웹사이트 디자인에 세련된 느낌을 줄 수 있습니다. 이번 블로그에서는 CSS를 사용하여 투명한 헤더를 디자인하는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정

먼저, HTML에서 헤더를 구현하기 위한 구조를 설정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>투명한 헤더</title>
</head>
<body>
  <header class="transparent-header">
    <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>
  </header>
  <div class="content">
    <!-- 페이지 내용 -->
  </div>
</body>
</html>

2. CSS 스타일 적용

다음으로, CSS를 사용하여 헤더를 투명하게 만듭니다.

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: rgba(255, 255, 255, 0.5); /* 50% 투명도로 흰색 배경 생성 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 다른 요소들보다 위에 표시되도록 함 */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

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

nav ul li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

이제 위 코드를 통해 투명한 헤더를 만들었습니다. 이를 적용하면 세련된 웹사이트 디자인을 완성할 수 있습니다.