캐러셀 버튼 스타일링 2

hover 효과

이전/다음 버튼에 마우스를 올릴 경우

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

마지막으로, 다음과 같은 CSS 코드가 어떤 의미를 갖는지 확인해 보겠습니다.

.prev:hover와 .next:hover는 웹페이지의 이전(prev) 버튼과 다음(next) 버튼 위에 마우스를 올렸을 때(hover) 발생하는 동작에 대한 스타일을 지정합니다.

:hover는 CSS의 가상 클래스 선택자(pseudo-class)로, 해당 클래스가 적용된 요소에 마우스를 올렸을 때만 적용되는 CSS를 정의합니다.

background-color는 배경색을 지정하는 속성입니다. 여기서 사용된 값인 rgba(0, 0, 0, 0.8)은 검은색(#000000)의 투명도가 0.8인 배경색을 의미합니다. 이 CSS 규칙으로 인해 버튼 요소에 마우스를 올리면, 이전 버튼과 다음 버튼의 배경색이 투명도가 0.8인 검은색으로 변경됩니다.

이제 슬라이드의 특정 부분으로 이동하는 점 인디케이터(Dot Indicator)를 꾸미겠습니다.

인디케이터 CSS 스타일

인디케이터 HTML

<div style="text-align: center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

인디케이터 CSS

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

인디케이터는 dot 클래스를 사용하여 스타일링하였습니다. 인디케이터는 클릭하면 해당 위치의 슬라이드로 이동하는 상호작용 요소입니다.

따라서 cursor 속성을 사용하여 마우스 커서가 위치 표시기 위에 올라갔을 때 손가락 모양으로 변경되도록 하였습니다.

height와 width 속성을 사용하여 위치 표시기의 크기를 15px로 설정하였고, margin 속성을 사용하여 위치 표시기 사이의 여백을 2px로 설정하였습니다.

background-color 속성을 사용하여 위치 표시기의 배경색을 회색에 가까운 #bbb로 설정하였고, border-radius 속성을 사용하여 위치 표시기의 모서리를 둥글게 하였습니다.

또한, display 속성을 사용하여 위치 표시기를 인라인 블록 요소로 만들었습니다.

위치 표시기는 <span> 태그를 사용하였기 때문에, 기본적으로 인라인 요소로 동작합니다.

하지만 인라인 요소는 width와 height 속성을 사용할 수 없습니다.

따라서 height와 width 속성을 적용하기 위해 display 속성을 사용하여 위치 표시기를 인라인 블록 요소로 만들었습니다.

마지막으로, transition 속성을 사용하여 위치 표시기의 배경색이 서서히 변하도록 하였습니다.

클릭할 때마다 배경색이 서서히 변하는 효과를 위해서입니다.

위치 표시기가 활성화되었을 때의 스타일은 active 클래스를 사용하여 스타일링하였습니다.

현재 슬라이드의 위치 표시기에는 active 클래스가 적용되어 있습니다.

그리고 상호작용을 유도하기 위해 마우스를 올렸을 때에도 스타일이 변경됩니다.

active 상태와 마우스를 올렸을 때, 둘 다 배경색이 조금 더 어두워지도록 설정하였습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

강의 등록하기로그인하기