[패스트캠퍼스X야놀자] 프론트엔드 개발 부트캠프_HTML/CSS 과제 카카오페이지 리팩토링

레포지토리 주소

https://github.com/YongYong21/clone-coding-kakao

원본 주소 및 클론코딩 주소

원본주소(카카오 페이지) : https://www.kakaocorp.com/page/
클론코딩 주소 : https://fantastic-cat-71b104.netlify.app/

수정 부분

hover 스타일링

.header-menu:hover li{
    color: #888;
}
.header-menu > li:hover  {
    color: #333;
}

처음 생각했을 때에는, 메인 메뉴(Header nav)를 hover했을 경우 그 태그를 제외한 나머지의 색상이 바뀌게 만들어야 해서, 자바스크립트를 사용해야 되는줄 알았지만, 스타일을 덮어쓰는 방식으로 수정을 했습니다.

추가 기능

스크롤 이벤트 리스너(Nav와 Calender)

const header = document.querySelector("header")
const calenderHeader = document.querySelector('.calender-header')
let preScrollY = window.scrollY;

window.addEventListener('scroll', function(){
  if(window.scrollY > 1){
    header.classList.add('brd-bt')
  }
  else {
    header.classList.remove('brd-bt')
    header.style.display = 'block'
  }
  
  if(window.scrollY > 100) {
    header.style.top = '-70px'
    calenderHeader.style.display = 'block'
    calenderHeader.style.top = '0'
    if(preScrollY > window.scrollY){
      header.style.top = '0'
      calenderHeader.style.top = '73px'
    }
  }
  else {
    calenderHeader.style.display = 'none'
  }
  
  preScrollY = window.scrollY
})

스크롤을 할 때, 특정한 scrollY값에 이벤트 발생 및 스크롤 업 이벤트 발생 부분을 추가했습니다.

max-width 1024px이하일 때, Footer 메뉴 클릭 시 메뉴 버튼 보이기 (첫 렌더링 페이지 기준)

const serviceContainer = document.querySelector(".service-container");
const serviceItem = document.querySelectorAll(".service-item");

if (window.innerWidth <= 1024) {
  serviceContainer.addEventListener("click", (e) => {
    e.target.querySelectorAll(".service-item").forEach((item) => {
      item.classList.toggle("show");
    });
  });
}

이용자의 해상도에 따라서 반응형 디자인이 다르다보니, 추가하게 되었습니다.

느낀점

이번 과제는 주된 목표가 html과 css를 이용하여 클론코딩을 진행하게 되었습니다.

하지만 대부분의 사이트들은 자바스크립트를 이용하여 좀 더 동적으로 사이트가 구성이 되어있었습니다,

그렇다보니 일부 기능들을 JS로 구현을 했었지만, 구현하는 과정에서 아직 익숙하지가 않아 구현하는 시간이 오래 걸리게 되었습니다.

구체적으로는 JS에서 html에 작성된 DOM 객체에 대해 원하는 부분에 해당하는 속성값들을 가지고 올 때 필요한 문법과 메소드들을 활용하는 과정에서 에러가 가장 많이 나왔던 것 같습니다.

메소드를 활용하는 부분에서는 JS로 알고리즘 문제를 풀었던 것들이 크게 도움이 되었다고 느껴졌었습니다.