Carousel 클래스
Coddy의 슬라이더 | 프론트엔드 프로젝트 코스 레슨 — 23개 중 15번째.
챌린지
쉬움wrapper 클래스 내에서 carousel 클래스를 대상으로 다음을 설정하세요:
1. display를 grid로 설정합니다.
2. grid-auto-flow를 column으로 설정합니다.
3. grid-auto-column을 calc((100% / 3) - 12px)으로 설정합니다.
4. x축의 overflow를 auto로 설정합니다.
5. scroll-snap-type을 x mandatory로 설정합니다.
6. gap을 16px으로 설정합니다.
7. 원하는 테두리 반경(border radius)을 설정합니다.
8. scroll behavior를 smooth로 설정합니다.
9. scrollbar width를 none으로 설정합니다.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>