코딩하는 김딸기

카트 css 본문

카테고리 없음

카트 css

김딸기* 2024. 10. 31. 03:47

기본 스타일

body {
  margin: 0;
  background-color: #fff;
  color: #111;
}

h1,
h2 {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
}
  • body: 전체 페이지의 기본 스타일을 설정합니다. 기본 여백을 없애고 배경색을 흰색, 글자색을 어두운 회색으로 설정합니다.
  • h1, h2: 제목의 폰트 크기, 스타일, 두께를 설정합니다. 제목은 크고 눈에 띄게 표시됩니다.

레이아웃 설정


.main-layout {
  max-width: 1100px;
  margin: 40px auto;
}
  • .main-layout: 최대 너비를 1100px로 제한하고, 페이지 중앙에 위치하도록 여백을 설정합니다.

장바구니 컨테이너


.cart-container {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 40px;
}
  • .cart-container: 장바구니 항목을 수평으로 나열하고, 항목 간 공간을 자동으로 배분합니다.

주문 요약 및 장바구니 항목


#cart-items {
  width: 100%;
}

#order-summary {
  width: 35%;
  margin-right: 30px;
  max-width: 350px;
}
  • #cart-items: 장바구니 항목의 너비를 100%로 설정합니다.
  • #order-summary: 주문 요약의 너비를 35%로 설정하고, 오른쪽 여백을 추가합니다.

장바구니 항목 스타일


.cart-item {
  display: flex;
  align-items: flex-start;
  padding-top: 20px;
}

.cart-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-right: 20px;
}
  • .cart-item: 각 장바구니 항목을 수평으로 배치하고, 위쪽에 패딩을 추가합니다.
  • .cart-item img: 장바구니 항목의 이미지를 150px로 설정하고, 비율을 유지하면서 자르기 위한 object-fit: cover를 사용합니다.

항목 세부정보


.item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
  • .item-details: 항목 세부정보를 세로로 나열하고, 가능한 공간을 차지하도록 설정합니다.

항목 이름 및 옵션 스타일


.item-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.item-option {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
  • .item-name: 항목 이름의 크기와 두께를 설정하고, 아래쪽 여백을 추가합니다.
  • .item-option: 항목 옵션의 크기와 색상을 설정합니다.

가격 및 행동 버튼


.item-price {
  font-size: 16px;
  font-weight: bold;
}
  • .item-price: 항목 가격의 크기와 두께를 설정합니다.
.remove-item,
.add-to-wishlist {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  margin-right: 15px;
  color: #666;
}
  • .remove-item, .add-to-wishlist: 항목 제거 및 위시리스트 추가 버튼 스타일을 설정하여 배경과 테두리를 없애고, 커서 모양을 포인터로 설정합니다.

주문 세부정보


.order-details {
  padding: 20px 0;
  border-radius: 4px;
}

.order-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
  • .order-details: 주문 세부정보에 상하 여백과 경계 반경을 설정합니다.
  • .order-row: 각 주문 항목을 수평으로 나열하고, 항목 간 여백을 설정합니다.

총 가격


.total {
  font-size: 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}
  • .total: 총 가격 스타일을 설정하고, 위쪽에 경계를 추가합니다.

주문 버튼


#order-button {
  width: 100%;
  padding: 15px;
  background-color: #111;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
}
  • #order-button: 전체 너비를 차지하는 주문 버튼의 스타일을 설정합니다.

배송 정보


.delivery-info {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}
  • .delivery-info: 배송 정보의 스타일을 설정하여 크기와 색상을 지정합니다.

위시리스트 스타일


.wishlist-container {
  margin-top: 40px;
}

#wishlist-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 왼쪽 정렬 */
  gap: 20px; /* 아이템 간 간격 */
}
  • .wishlist-container: 위시리스트 컨테이너에 여백을 추가합니다.
  • #wishlist-items: 위시리스트 항목을 수평으로 나열하고, 공간이 부족할 경우 줄 바꿈하도록 설정합니다.

위시리스트 항목 스타일


.wishlist-item {
  flex: 0 0 48%; /* 각 아이템이 50% 공간을 차지하도록 */
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e5e5e5;
}

.wishlist-item img {
  max-width: 100%;
  height: auto;
  margin-right: 20px;
}
  • .wishlist-item: 각 위시리스트 항목을 세로로 나열하고, 하단에 경계를 추가합니다.
 
  • .wishlist-item img: 위시리스트 항목의 이미지에 최대 너비를 100%로 설정하여 비율을 유지합니다.

장바구니 버튼


.add-to-cart-button {
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 4px;
  cursor: pointer;
}
  • .add-to-cart-button: 장바구니 추가 버튼 스타일을 설정합니다.
  •  

버튼 기본 스타일


.button-class {
  border: none;
  outline: none;
  background-color: inherit;
}
  • .button-class: 기본 버튼 스타일을 설정하여 경계와 테두리를 없앱니다.

배송 정보 스타일

.delivery-info {
  color: #111;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 100px;
  border-bottom: 1px solid #e5e5e5;
}
  • .delivery-info: 배송 정보의 색상, 여백, 방향 및 간격을 설정합니다.

배송료 정보


/* 첫째 줄: 배송료 정보 */
.shipping-fee {
  font-weight: bold; /* 배송료 정보는 볼드체 */
}
  • .shipping-fee: 배송료 정보를 볼드체로 설정합니다.

도착 예정일 및 지역 수정


/* 둘째 줄: 도착 예정일, 지역 수정 */
.delivery-details {
  display: flex;
  gap: 10px;
}

.region-edit a {
  text-decoration: underline; /* 밑줄 효과 */
  font-weight: bold; /* 볼드체 */
}
  • .delivery-details: 도착 예정일과 지역 수정을 수평으로 나열합니다.
  • .region-edit a: 링크에 밑줄 효과와 볼드체를 적용합니다.

미디어 쿼리


/* 미디어 쿼리 */
/* 미디어 쿼리: 화면이 768px 이하로 줄어들면 세로 정렬로 변경 */
@media (max-width: 768px) {
  .main-layout {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
  }

  .cart-container {
    display: block;
  }

  #order-button {
    width: auto;
  }

  h1 {
    text-align: center;
  }

  .item-details .item-header {
    display: block;
  }

  #cart-items {
    width: 80%;
  }
}

@media: 화면 크기가 768px 이하일 때 적용되는 스타일입니다. 주 레이아웃을 세로로 바꾸고, 장바구니 컨테이너와 주문 요약의 너비를 조정합니다.