본문으로 건너뛰기

캐러셀 스타일링

캐러셀 스타일링

CSS를 통해 캐러셀을 스타일링 해보겠습니다.


.popular-items-list:

  • position: relative;: 이 스타일은 자식 요소에 대한 절대 위치 지정의 기준점을 설정합니다. 즉, 이 리스트 내의 절대 위치 지정된 요소는 이 컨테이너를 기준으로 위치합니다.

  • display: flex;: flexbox 레이아웃을 사용하여 내부의 아이템들을 수평으로 나열합니다.

  • overflow: hidden;: 이 스타일은 컨테이너 바깥으로 나오는 내용을 숨깁니다. 즉, 캐러셀의 아이템이 여러 개 있더라도 현재 보이는 영역만 사용자에게 보이게 합니다.

CSS
.popular-items-list {
position: relative;
width: 100%;
height: 520px;
display: flex;
gap: 24px;
overflow: hidden;
}

.popular-item:

  • flex-shrink: 0;: 이 속성은 flexbox 레이아웃에서 아이템이 줄어들지 않게 하는 데 사용됩니다. 즉, 아이템의 크기가 고정됩니다.

  • width: 340px;: 각 아이템의 너비를 340px로 설정합니다.

  • height: 462px;: 각 아이템의 높이를 462px로 설정합니다.

CSS
.popular-item {
flex-shrink: 0;
width: 340px;
height: 462px;
}

.popular-item-buttons-container:

  • display: flex;: 이 속성을 사용하여 컨테이너 내의 요소들(구분자와 두 버튼)을 수평으로 나열합니다.

  • align-items: center;: 이 속성은 컨테이너 내의 요소들을 수직 중앙에 배치합니다. 따라서 구분자와 두 버튼은 수직으로 중앙 정렬됩니다.

  • gap: 16px;: 이 속성은 컨테이너 내의 직접적인 자식 요소들 사이에 간격을 줍니다. 구분자와 각 버튼 사이에 16px의 간격이 적용됩니다.

  • margin-top: 20px;: 이 속성은 컨테이너의 상단에 여백을 추가합니다. 따라서 이 컨테이너는 그 위에 있는 요소로부터 20px의 간격을 갖게 됩니다.

CSS
.popular-item-buttons-container {
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
}