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

캐러셀 컨테이너 스타일 입히기

지금부터 캐러셀을 담는 컨테이너와 캐러셀 슬라이드를 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로 제한했습니다.

다음 내용이 궁금하다면?

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