[css3] 투명 네비게이션 바 만들기 네비바 투명도 설정하기 예제 소스 코드 이미지 배경 비디오 웹 페이지 홈페이지

안녕하세요.

이번 포스팅은 CSS으로 투명한 네비게이션 바 만들기입니다.

웹페이지나 홈페이지에 투명한 네비게이션 바를 적용할 수 있습니다.

스타일시트로 간단하게 변경합니다.

인터넷 상에서 활용도가 높은 기능으로 자주 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
<head>
    <title>codeomni.tistory.com</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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>
</body>
</html>
 

▲ 먼저, html으로 네비게이션 메뉴를 만들어줍니다.

▲ <nav> ~ </nav> 태그를 사용하여 메뉴를 <li>~</li>태그에 넣습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

 
html {
  height: 100%;
  background-color: #0D9DE6;
}
 
nav {
  margin: 0 auto;
}
 
nav ul {
  text-align: center;
}
 
nav ul li {
  display: inline-block;
}
 
nav ul li a {
  padding: 18px; 
  text-transform:uppercase;
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
  text-decoration: none;
  display: block;
}
 
nav ul li a:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 1);
}
 