캐러셀 슬라이드 꾸미기

지금부터 캐러셀을 담는 컨테이너와 캐러셀 슬라이드를 CSS로 꾸며볼게요.

컨테이너 스타일 입히기

컨테이너 HTML

<section id="memory" class="container">
  <div class="content-text">
    <h2>추억</h2>
    <p>제 소중한 추억들이에요</p>
    ...
  </div>
</section>

컨테이너 CSS

.container {
  max-width: var(--width-medium);
  margin: 0 auto;
  padding: 16px 32px;
}

.content-text {
  text-align: center;
  margin: 24px 0;
}

.content-text h2 {
  transition: 0.2s ease-in-out;
}

.content-text p {
  padding: 8px;
  margin: 0 auto;
  max-width: 700px;
}

컨테이너는 max-width 속성을 사용하여 최대로 늘어날 수 있는 너비를 --width-medium 변수의 값으로 제한했어요.

margin: auto 속성을 사용해 좌우에 자동 여백을 주어 컨테이너를 중앙으로 정렬했고, padding 속성을 사용해 컨테이너의 내용(content)과 컨테이너의 경계선(border) 사이에 여백을 주었어요.

컨테이너의 안에 있는 <div> 요소는 content-text 클래스를 사용했어요.

이 클래스는 text-align 속성을 사용하여 텍스트를 가운데 정렬하고, margin 속성을 사용하여 위아래로 24px의 여백을 주었어요.

<p> 태그는 padding: 8px; 속성을 사용해 텍스트와 테두리 사이에 8px 여백을 주었고, margin: 0 auto; 속성을 사용하여 좌우로 자동으로 여백을 주어서 중앙 정렬을 구현했어요.

마지막으로 max-width 속성을 사용하여 p 태그의 최대 너비를 700px로 제한했어요.

캐러셀 스타일 입히기

캐러셀 HTML

<div class="slideshow-container">
  <div class="my-slides fade">
    <img
      src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      class="slide-image"
    />
    <div class="slide-text">이미지 설명1</div>
  </div>

  <div class="my-slides fade">
    <img
      src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      class="slide-image"
    />
    <div class="slide-text">이미지 설명2</div>
  </div>
  ...
</div>

캐러셀 CSS

.slideshow-container {
  padding-top: 24px;
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.my-slides {
  display: none;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

캐러셀을 담는 컨테이너는 slideshow-container 클래스를 사용해 CSS를 적용해요.

이 클래스는 padding: 24px 속성을 사용해 위쪽으로 24px의 여백을 주었고, max-width 속성을 사용해 최대로 늘어날 수 있는 너비를 1000px로 제한했어요.

position: relative; 속성을 사용하여 컨테이너를 상대적으로 위치시켰고, margin: auto; 속성을 사용하여 좌우로 자동으로 여백을 주어서 중앙 정렬했어요.

캐러셀의 슬라이드는 my-slides 클래스를 사용해 CSS를 적용했어요.

display: none; 속성은 모든 슬라이드가 기본적으로 화면에 보이지 않도록 해요.

먼저 모든 슬라이드를 화면에서 숨겨놓고, CSS와 JavaScript를 활용해 원하는 슬라이드를 하나만 보이도록 할거에요.

이렇게 하면 캐러셀에서 한 번에 여러 슬라이드가 보이는 것을 방지할 수 있어요.

CSS

.slide-image {
  width: 100%;
  height: 320px;
}

.slide-text {
  color: black;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

슬라이드 안의 이미지는 slide-image 클래스를 사용해 CSS를 적용했어요.

width: 100%;으로 이미지의 너비를 100%로 설정했고, height: 320px;으로 이미지의 높이를 320px로 고정했어요.

슬라이드 안의 텍스트는 slide-text 클래스 사용해 CSS를 적용했어요.

color: black; 속성을 사용하여 글자의 색상을 검은색으로 설정했고, font-size: 16px;으로 글자의 크기를 16px로 설정했어요.

padding: 8px 12px;은 텍스트 위아래로 8px의 여백을, 좌우로 12px의 여백을 주어요.

그리고 position: absolute으로 텍스트를 절대적(absolute)으로 위치시켰어요.

요소를 절대적으로 위치시키면, 부모 요소 중에서 position: static이 아닌 가장 가까운 요소를 기준으로 위치가 결정되어요.

여기서는 "position: relative" 속성을 가진 "slideshow-container"를 기준으로 텍스트 요소가 위치해요.

position: absolute이 없으면 캐러셀의 밖으로 텍스트가 벗어나게 되니 주의해 주세요!

bottom: 8px; 속성을 사용하여 텍스트를 슬라이드의 아래로부터 8px로 위치시켰고, width: 100%; 속성을 사용하여 너비를 100%로 설정했어요.

마지막으로 text-align 속성을 사용해 텍스트를 가운데 정렬했어요.

슬라이드를 넘길 때 시각적 효과가 있으면, 바뀐 슬라이드를 더 명확하게 구분할 수 있겠죠?

슬라이드를 담는 div의 fade 클래스는 슬라이드가 전환될 때, 투명도를 조절하는 애니메이션 효과를 부여해요.

먼저 아래 CSS를 볼까요?

fade 애니메이션 CSS

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

fade 클래스는 animation-name 속성과 animation-duration 속성을 가지고 있어요.

animation-name은 애니메이션에 사용할 키프레임(간단히 말해, 애니메이션의 각 단계)의 이름을 지정해요.

이 경우에는 fade라는 키프레임을 사용했어요.

animation-duration은 애니메이션이 한 번 재생되는 데 걸리는 시간을 지정해요.

여기서는 시간이 1.5초로 설정되어 있어요.

@keyframes는 키프레임 애니메이션을 정의하는 CSS 규칙이에요.

keyframes를 통해 fade라는 이름의 키프레임 애니메이션을 정의했어요.

from 키워드는 애니메이션의 시작 지점을 의미하며, to 키워드는 애니메이션의 끝 지점을 의미해요.

애니메이션 키프레임 내에서는 opacity 속성을 사용하여 투명도를 조절했어요.

CSS opacity 속성은 0부터 1까지의 값으로 투명도를 나타내며, 0에 가까울수록 투명하고 1에 가까울수록 불투명해져요.

따라서 .fade CSS는 클래스가 적용된 요소가 투명도 0.4에서 시작해, 1.5초 후 투명도가 1이 되는 애니메이션 효과를 만들어요.

이렇게 새로운 슬라이드가 나타날 때, 투명도가 서서히 변하며 자연스럽게 나타나는 효과를 줄 수 있어요.

다음으로, 캐러셀 버튼의 스타일을 변경해볼까요?