캐러셀 스타일링

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

다음 내용이 궁금하다면?

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