팀 프로젝트 | MovieOn - 10

🔆오늘의 목표

• 팀 코드 결합

팀 코드 결합

이제 각자 맡은 역할과 페이지를 하나로 합쳐보는 작업을 진행한다. 물론 중간중간에 해주어야 좋았겠지만... 힘드ㄹ어... 일단 합치기 시작했는데, 우려한대로 css의 충돌이 가장 문제였다 ㅠㅠ 이럴 줄 알았으면 공통 부분을 제대로 정하고 갔어야했는데, 뼈저리게 느낀다. 확실하게 공통 부분을 짚고 넘어가야 했음을..!
팀원이 만든 헤더 고정 메뉴바, 푸터를 내가 만든 페이지에 적용해보았는데, css충돌로 헤더와 푸터가 일그러졌다. 그래서 따로 css파일을 하나 더 만들어서 적용!

기타

<section>의 높이가 자식들을 감싸고 있지 않아서, <footer>가 위에 붙어서 나왔는데, float속성을 사용하는 녀석 때문이란 것을 발견! 좋은 방법 2가지가 있었다.

/* 첫번째 방법 */
/* 부모 요소에 overflow값을 auto로 */
#section {
  overflow: auto; /* or overflow: hidden; */
}

/* 두번째 방법 */
/* float 속성의 부모 요소에 after요소를 추가하고 아래와 같이 설정한다 */
#section:after {
  content: "";
  display: block;
  clear: both;
}

위와 같은 방법으로 크기가 무시되던 float녀석들에 대해서 해결했다. 단점으로는 부모요소가 overflow속성을 가진다면 sticky가 먹지 않는다는 것!! css의 끝은 어디까지인 것 인가..!

그래서 전에 개인 프로젝트때 만든 sticky기능보다 보다 쉬운 방법을 찾아서 만들었다.
전에는 스크롤 되면 선택자를 추가해서 position:fixed 옵션을 주었지만, 지금도 별 다르진 않지만.. 더 간편한 방법으로 해낸 것 같다.

// 고정시킬 네비게이션 바
const nav = document.getElementById('listAndnavList');
// 네비게이션 바의 top의 위치 + 현재 스크롤된 window의 Y값
const rectTop = nav.getBoundingClientRect().top + window.pageYOffset;

// 스크롤 이벤트 추가
window.addEventListener('scroll', () => {
  // 네비게이션 바의 top 값이 window의 스크롤 값보다 작으면 실행한다.
  if (rectTop < window.pageYOffset) {
    nav.style.position = 'fixed';
    nav.style.top = 0;
  } 
  // 아니라면 원래 값으로 되돌린다.
  else {
    nav.style.position = 'static';
    nav.style.top = '';
  }
});

참고로 window 좌표는 0과 1크기로 가정했을 때, 왼쪽 위 모서리가 0,0부터 시작이고 이고 오른쪽 아래가 1,1이므로 Y값은 아래로 갈수록 커진다.