[0424] TIL

오늘은 강의 듣기가 너무.. 싫어서 힘들어서
개인 과제만 진행했다.

그리드 실전에서 사용하기

맨날 flex만 사용해왔어서 카드 리스트도 flex로 구현했는데, space between을 이용하여 구현하니 마지막 줄의 카드가 꽉 채워져 있지 않을 때

자꾸 이런식으로 됐다. 하지만 내가 원했던 레이아웃은 바로..

이거다...

이때, 저번에 새로 배웠던 grid가 떠올랐다.....!!

container에 아래의 css를 적용하면 완벽해버렷 🤩

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;

---

근데 이 section에 데이터가 없다는 안내메시지를 넣으려니

이렇게 되버린거다..!
하지만 나에게는 저번에 공부한 그리드 지식이 있지.

grid-column: 1 / span 3;

두둥 컷컷크어어어엇!!!!!!!

---

스크롤 감지 헤더

스크롤을 내리면 사라지는 헤더를 처음으로 구현해봤다. (구글링한 코드)

nextScrollTop > prevScrollTop 이면 스크롤이 내려간 것이 -> header에 class에 'scrollDown'을 추가한다.
className에는 translate 속성이 있어 header이 위로 올라가서 보이지 않게 된다.

const $header = document.querySelector('header');
let prevScrollTop = 0;
document.addEventListener('scroll', function () {
  var nextScrollTop = window.scrollY || 0;
  if (nextScrollTop > prevScrollTop) $header.classList.add('scrollDown');
  else $header.classList.remove('scrollDown');
  prevScrollTop = nextScrollTop;
});

header {
  transition: 1s;
}

header.scrollDown {
  transform: translate(0, -4.9rem); /* header의 height가 4.9rem */
}

쉽다 쉬워~
스크롤 이벤트는 많이 발생해서 성능이 낮아지기 때문에 최적화했다는 글을 본 적이 있는데, 시간이 나면 나도 해봐야겠다 :)