캐러셀 버튼 꾸미기

지금부터 캐러셀의 이전/다음 버튼과 인디케이터의 슬라이드를 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 클래스를 정의할 수 있어요.

반면에 prev와 next의 공통되지 않는 부분은 아래와 같이 따로 CSS 클래스를 정의했어요.

이전/다음 버튼 각각의 CSS

.prev {
  left: 0;
}

.next {
  right: 0;
}

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

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

공통되는 부분을 조금 더 자세히 살펴볼까요?

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: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의 검은색으로 변해요.

지금까지 CSS를 활용해 캐러셀의 이전 / 다음 버튼을 예쁘게 꾸며보았어요! 이제 슬라이드의 특정 부분으로 이동하는 점 인디케이터(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 클래스 사용해 스타일링했어요. 인디케이터는 클릭하면 해당 위치의 슬라이드로 움직이는 상호작용(Interaction) 요소가 있어요.