[css] CSS 투명한 메뉴 디자인
웹 디자인에서 투명한 메뉴는 모던하고 세련된 느낌을 줄 수 있습니다. CSS를 사용하여 투명한 메뉴를 만드는 방법을 살펴보겠습니다.
HTML 구조
우선 HTML 구조를 생성합니다. 메뉴에 해당하는 요소를 만들고, 각 메뉴 항목에 링크를 추가합니다.
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">연락하기</a></li>
</ul>
</nav>
CSS 디자인
이제 CSS를 사용하여 메뉴를 투명하게 디자인합니다. 아래는 간단한 예시입니다.
nav {
background-color: rgba(255, 255, 255, 0.5); /* 투명도 조절을 위해 rgba 색상 사용 */
padding: 20px;
border-radius: 10px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline;
margin: 0 10px;
}
a {
text-decoration: none;
color: #333;
font-weight: bold;
opacity: 0.7; /* 투명도 조절 */
transition: opacity 0.3s ease; /* 마우스 호버 시 부드러운 효과를 위한 transition 추가 */
}
a:hover {
opacity: 1; /* 마우스 호버 시 투명도 변화 */
}
이렇게 하면 화면 상단에 투명한 메뉴가 만들어집니다. 여기서 rgba 색상을 사용하여 투명도를 조절할 수 있으며, opacity 속성을 사용하여 텍스트 자체의 투명도를 조절할 수 있습니다.
이제 사용자가 마우스를 메뉴 항목 위로 옮길 때 투명도가 변하는 부드러운 효과가 추가된 투명한 메뉴를 만들어보십시오.