캐러셀에 CSS 스타일 입히기

캐러셀의 컨테이너의 스타일을 완료했으니 이제 캐러셀의 스타일을 입히겠습니다.

예시 코드

캐러셀 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 class="my-slides fade">
        <img
            src="https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
            class="slide-image"
        />
        <div class="slide-text">이미지 설명3</div>
    </div>
    ...
</div>

캐러셀 CSS

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

.my-slides {
    display: none;
}

.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;
}

/* 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를 활용해 원하는 슬라이드를 하나만 보이도록 할 것입니다.

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

슬라이드 안의 이미지는 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 속성을 사용해 텍스트를 가운데 정렬했습니다.

다음 내용이 궁금하다면?

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

강의 등록하기로그인하기