[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 12일차 - 세이프 홈즈 클론 코딩(CSS, JS)

아기코린이·2023년 6월 18일

IT개발캠프 React 개발자부트캠프 리액트 스나이퍼팩토리 웅진씽크빅 유데미 인사이드아웃 프로젝트캠프 프로젝트캠프후기

10주 완성 프로젝트 캠프

목록 보기

6/12

들어가기

이번 블로깅은 저번 9일차 과제인 세이프 홈즈 HTML에 CSS와 JS를 추가하여 랜딩페이지를 완성하는 과정이다.

CSS

CSS의 전체코드를 다 올리기보단 전체적인 구조를 작성해봤다. 전체코드는 아래 전체코드 섹션에서 확인할 수 있다.

이번 CSS는 관계선택자를 최대한으로 활용해봤다. 장점으로는 class명이나 id명을 깊게 생각하지 않아도 된다는 점이었다. 반대로 단점으로는 직관적이지 않아 코드를 짜는데 조금 어려움이 있었고, 유지보수를 생각해봤을 때 비효율적일 것 같다는 생각이 들었다. 다음부터는 적절히 섞어서 사용해야겠다.

최대한 반응형 코드를 추가로 작성하는 일이 없게 끔 신경써서 코드를 작성했다. 레이아웃이 바뀌는 feature 섹션이 아니였다면 media query도 사용하지 않아도 됐을거 같다. 폰트 사이즈가 바뀌는 부분은 em, rem을 사용했다면 어땠을까하는 생각이든다.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

nav {
  ...
}

header {
  ...
}

section {

  ...

  &.price-card-container {
    ...
  }

  & > article {
    ...
  }

  &.review-container {
    ...
  }

  &.info-container {
    ...
  }
}

footer {
  ...
}

@media (min-width: 1024px) {
  ...
}

@media (max-width: 1024px) {
  ...
}

@media (max-width: 768px) {
  ...
}

@media (max-width: 480px) {
  ...
}

JS

Javascript를 활용해서 리뷰섹션의 리뷰들이 흘러가면서 나오게 코드를 작성해봤다. Javascript로 animation을 작성해본것이 처음이라 조금 힘들었다. 내 검색 실력이 부족한 것인지 인터넷에 자료가 없어 혼자 작성하게 되었다.

총 3개의 리뷰 카드가 있고 각각의 카드에 현위치 부터 왼쪽으로 일정수준 움직이게 끔 로직을 구성해봤다. 무한히 흐르게하기 위해 setInterval 함수를 사용하여 반복하게 구성했다.

const reviewSlide = document.querySelector('.review-slide');
const reviewSlideCard = document.querySelectorAll('.review-slide-card');

const slideAnimation = () => {
  reviewSlideCard.forEach((e) =>
    e.animate(
      {
        transform: ['translateX(0px)', 'translateX(calc(-100% - 40px))'],
      },
      10000
    )
  );

  return setInterval(() => {
    slideAnimation();
  }, 10010);
};

slideAnimation();