활성 메뉴 강조하기
Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 39번째.
챌린지
쉬움네 개의 링크가 있는 간단한 내비게이션 메뉴가 제공됩니다. 여러분의 작업은 의사 클래스(pseudo-classes)를 사용하여 이를 더 대화형으로 만드는 것입니다.
다음을 수행하는 CSS를 작성하세요:
- 사용자가 링크 위에 마우스를 올렸을 때(hover) 배경색을
rgba(50, 168, 82, 1)로 변경합니다. - 링크가 활발히 클릭되고 있을 때(active) 텍스트 색상을 white로 변경합니다.
직접 해보기
<html>
<head>
<title>Highlight Active Menu</title>
<style>
nav a {
padding: 10px;
text-decoration: none;
color: black;
}
/* Add your styles here */
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="active">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>