본문으로 건너뛰기
실습하기

캐러셀 버튼 스타일링 1

지금부터 캐러셀의 이전/다음 버튼과 인디케이터의 슬라이드를 CSS로 꾸미는 방법을 설명하겠습니다.


이전 / 다음 버튼 스타일 입히기​

이전/다음 버튼 HTML
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
이전/다음 버튼 CSS
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 4px;
    user-select: none;
}

.prev {
    left: 0;
    border-radius: 4px;
}

.next {
    right: 0;
    border-radius: 4px;
}

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

버튼은 마우스를 올려놓거나(hover) 클릭(Click)하는 등 사용자와 상호작용(Interaction)이 때문에, CSS로 시각적인 효과를 더 세밀하게 주어야 합니다.

지금부터 캐러셀을 어떻게 스타일링 했는지 확인해 보겠습니다.


공통되는 스타일​

먼저, 이전 / 다음 버튼은 prev와 next 클래스를 사용해 스타일링했어요. prev와 next 클래스의 공통되는 부분은

이전/다음 버튼 공통 CSS
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    ...;
}

위와 같이 공통되는 스타일을 적용하였습니다. 여러 클래스에 공통적으로 적용하는 부분은 컴마(,)로 구분하여 CSS 클래스를 정의할 수 있습니다.

  • cursor: pointer;: 마우스 커서를 이전/다음 버튼 위에 올려 놓으면, 커서가 손가락 모양으로 변경되도록 하였습니다.

  • position: absolute;: 슬라이드 내 텍스트와 마찬가지로, 이전/다음 버튼을 캐러셀 안에 위치시키기 위해 버튼을 절대적(absolute)으로 위치시켰습니다.

  • top: 50%;: 버튼이 위쪽에서 50%에 위치하도록, 즉 슬라이드의 중앙에 위치하도록 하였습니다.

  • width: auto;: 버튼의 너비가 콘텐츠의 너비에 맞게 자동 조정되도록 하였습니다.

  • padding: 16px;: 속성을 사용하여 버튼의 내부 여백을 16px로 설정하였습니다.

  • margin-top: -22px;: 버튼이 수직으로 중앙에 위치시키기 위해, 버튼의 위쪽 여백을 -22px로 설정하였습니다. 이는 바깥 쪽 여백이 아닌 안쪽으로 22px 당겨지도록 하는 것입니다. 왜냐하면 top: 50%로만 설정하면 버튼의 위쪽 여백이 50%가 되어, 요소가 수직 중앙보다 조금 더 내려가기 때문입니다.

  • color: white;로 버튼의 글자 색상을 흰색으로 설정하였습니다.

  • font-weight: bold;로 글자를 굵게(bold)로 설정하였습니다.

  • font-size: 18px;로 글자의 크기를 18px로 설정하였습니다.

  • transition: 0.6s ease;로 마우스를 버튼 위에 올려두었을 때(hover), 버튼의 배경색이 0.6초 동안 변하도록 설정하였습니다.

  • border-radius: 4px;로 버튼의 모서리를 4px만큼 둥글게 하였습니다.

  • user-select: none;는 글자를 드래그(Drag)할 수 없도록 하였습니다. 이는 버튼의 텍스트가 드래그되면 보기 좋지 않기 때문입니다. 마우스 클릭은 가능합니다.


각각의 스타일​

반면에 prev와 next의 공통되지 않는 부분은

이전/다음 버튼 각각의 CSS
.prev {
    left: 0;
}

.next {
    right: 0;
}

위와 같이 각각 따로 CSS 클래스를 정의했습니다.

prev 클래스가 적용되는 왼쪽 화살표 버튼은 슬라이드의 왼쪽에(left: 0)

next 클래스가 적용되는 오른쪽 화살표 버튼은 슬라이드 오른쪽에(right: 0) 배치했습니다.

다음 내용이 궁금하다면?

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