💭 [과제 기록] - 오늘의 집 Clone (JS- Swiper, CSS - :hover)

"오늘의 집" 사이트를 클론 코딩하면서 겪은 어려움과 배운 내용을 공유하려고 합니다. HTML, CSS, JavaScript를 사용하여 어떻게 레이아웃을 구성하고 기능을 구현하는지 알아보고, 특히 어려웠던 JS-Swiper와 CSS의 :hover에 더 집중해 보겠습니다.

---

1. 어려웠던 부분

💡 복잡한 레이아웃 및 디자인 일치

"오늘의 집"은 세밀하게 디자인된 복잡한 레이아웃을 가지고 있어, Flex와 Grid를 사용하여 원본과 유사한 디자인을 만드는 것이 어려웠습니다. 특히, 반응형 디자인을 적용하면서 디바이스별로 적절한 레이아웃을 구성하는 것이 도전적이었습니다.

💡 Swiper 라이브러리의 이해와 적용

Swiper 라이브러리를 처음 사용했기 때문에 초기 설정 및 옵션 이해가 어려웠습니다. 슬라이드 간 간격, 무한 루프, 자동 재생 등 다양한 옵션을 적용하면서 라이브러리의 동작 원리를 파악하는 데 시간이 걸렸습니다.

💡 CSS :hover 효과 및 애니메이션

사용자와의 상호작용을 높이기 위해 CSS의 :hover 효과 및 애니메이션을 적용하는 부분에서 어려움을 겪었습니다. 정확한 타이밍과 자연스러운 효과를 주기 위해 노력했습니다.

2. 배운 내용

2.1 Flex와 Grid의 활용

Flex와 Grid를 효과적으로 사용하여 복잡한 레이아웃을 구성하는 방법을 배웠습니다. 특히, auto-fill과 auto-fit을 이용하여 반응형 디자인을 구현하는 법을 숙지했습니다.

/* 예시: Grid 활용 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.item {
  flex: 1;
  /* 추가적인 스타일링 ... */
}

---

2.2 Swiper 라이브러리 활용

Swiper 라이브러리를 활용하여 다양한 형태의 이미지 슬라이더를 구현하는 방법을 습득했습니다. 자동 재생, 무한 루프, 네비게이션 등 다양한 옵션들을 효과적으로 활용하여 "오늘의 집" 클론 코딩에서 배너 스와이퍼를 구현한 예시를 살펴보겠습니다.

HTML 구조

<div class="__rightBanner">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- 각각의 슬라이드 -->
      <div class="swiper-slide">
        <img src="./images/banner_1.jpeg" alt="홈페이지 사이드 배너" />
        <a href="javascript:void(0)" class="btn">1/12</a>
      </div>
      <!-- 다른 슬라이드들 ... -->
    </div>
  </div>
  <!-- 이전, 다음 버튼 -->
  <div class="swiper-prev">
    <span class="material-symbols-outlined">arrow_back</span>
  </div>
  <div class="swiper-next">
    <span class="material-symbols-outlined">arrow_forward</span>
  </div>
</div>

CSS 스타일링

main .banner .__rightBanner {
  cursor: pointer;
  position: relative;
}

main .banner .__rightBanner:hover img {
  transform: scale(105%);
}

.banner .__rightBanner .swiper-container {
  width: 269px;
  height: 553px;
}

.banner .__rightBanner .swiper-slide {
  position: relative;
  height: 510px;
  position: relative;
  overflow: hidden;
}

.banner .promotion .swiper-slide .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

JavaScript Swiper 구현

new Swiper('.__rightBanner .swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  centeredSlides: true,
  loop: true,
  autoplay: {
    delay: 5000
  },
  navigation: {
    prevEl: '.__rightBanner .swiper-prev',
    nextEl: '.__rightBanner .swiper-next'
  }
});

---

2.3 CSS의 :hover 활용

CSS의 :hover는 마우스가 요소 위에 올라가 있는 동안의 상태를 선택하는 가상 클래스입니다. 이를 활용하여 "오늘의 집" 클론 코딩에서의 특정 요소에 마우스를 올리면 발생하는 효과를 구현한 예시를 살펴보겠습니다.

/* CSS :hover 예시 */
.banner .__rightBanner:hover img {
  transform: scale(105%);
}

.banner .__rightBanner .swiper-prev,
.banner .__rightBanner .swiper-next {
  /* 다른 스타일 속성들 ... */
  visibility: hidden;
}

.banner .__rightBanner:hover .swiper-prev,
.banner .__rightBanner:hover .swiper-next {
  visibility: visible;
}

1. 이미지 확대 효과: :hover를 사용하여 배너의 오른쪽 부분(.banner .__rightBanner)에 마우스를 올리면 그 안의 이미지(img)에 transform 속성을 적용하여 105%로 확대하는 효과를 줍니다. 이는 사용자가 마우스를 가져다 놓을 때 이미지에 자연스러운 확대 효과를 주어 시각적으로 더 흥미롭게 만듭니다.

2. 이전/다음 버튼 나타내기: .swiper-prev와 .swiper-next는 배너 스와이퍼의 이전과 다음을 나타내는 버튼입니다. 초기에는 visibility: hidden;으로 설정하여 화면에서 숨겨져 있습니다. 그러나 .banner .__rightBanner:hover가 적용된 상태에서는 마우스를 가져다 놓으면 .swiper-prev와 .swiper-next의 visibility를 visible로 변경하여 버튼이 나타나게 됩니다.

이처럼 :hover를 활용하면 사용자의 상호작용에 따라 동적이고 멋진 효과를 부여할 수 있습니다.

---

2.4 이미지 위에 설명 추가하기

position: absolute와 같은 CSS 속성을 사용하여 이미지 위에 텍스트를 추가하고, 미디어 쿼리를 활용하여 반응형으로 동작하도록 구현하는 방법을 배웠습니다.

/* 예시: 이미지 위에 텍스트 추가 */
.image-container {
  position: relative;
}

.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 추가적인 스타일링 ... */
}