소개
이 랩에서는 "Sibling Fade"라고 하는 CSS 효과를 구현하는 방법을 배웁니다. 이 효과는 호버된 항목의 형제 요소들이 흐려지도록 하고, 호버된 항목은 완전히 보이도록 합니다. CSS 선택자와 전환 (transition) 을 사용하여 이 효과를 간단하고 우아하게 구현할 것입니다. 이 랩을 마치면 CSS 를 사용하여 동적이고 상호 작용적인 웹 콘텐츠를 만드는 방법에 대한 이해도가 높아질 것입니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
Sibling Fade (형제 페이드)
index.html과 style.css는 이미 VM 에 제공되어 있습니다.
호버된 항목의 형제 요소를 흐리게 하려면 다음 단계를 따르세요:
transition속성을 사용하여opacity변경을 애니메이션화합니다.
span {
padding: 0 16px;
transition: opacity 0.3s;
}
:hover및:not의사 클래스 선택자를 사용하여 마우스가 위에 있지 않은 모든 요소의opacity를0.5로 변경합니다.
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
다음은 HTML 코드 예시입니다:
<div class="sibling-fade">
<span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
<span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>
오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
요약
축하합니다! Sibling Fade 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.