가이드라인

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

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

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말