개인 포트폴리오 만드는 중 알게된 것들

Element.getBoundingClientRect()

눈에 보여지는 수치.

HTMLElement.offset은 원초적인 사이즈라고 이해하면 된다.

const homeHeight = home.getBoundingClientRect().height;
//width도 가능

window.scrollY

문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환
수평은 window.scrollX 사용

document.addEventListener("scroll", () => {
  // console.log(window.scrollY);
  // console.log(navbarHeight);
  if (window.scrollY > navbarHeight) {
    navbar.classList.add("navbar--dark");
  } else {
    navbar.classList.remove("navbar--dark");
  }
}); //스크롤에 따라 HTML에 class 추가

data-

HTML에서 data-****(넣고 싶은 이름)로 사용할 수 있다.

어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다.
dataset으로 확인할 수 있다.(dataset.설정한 이름)

const target = e.target;
const link = target.dataset.link;

<button class="category__btn active" data-filter="*">
<button class="category__btn" data-filter="front-end">
<a          
href="https://github.com/codestates/torys-journey"
class="project"
target="blank"
data-type="front-end"
>

scrollIntoViews()

scrollIntoView() 메소드는 scrollIntoView()가 호출된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.

간단하게 설명하면 scrollIntoViews()를 사용하면 스크롤이 움직여 그것을 보여준다고 생각하면 됨.

기본적으로는 true.
화면 맨 위에 해당 class의 맨 위를 보여준다.
false로 바꾸면 해당 class의 맨 아래와 화면 맨 아래를 맞춰서 보여준다.

behavior을 smooth로 설정하면 부드럽게 이동한다.

navbarMenu.addEventListener("click", (e) => {
  const target = e.target;
  const link = target.dataset.link;
  if (link === null) {
    return;
  }
  scrollIntoViews(link);
});

const scrollIntoViews = (selector) => {
  const scrollTo = document.querySelector(selector);
  scrollTo.scrollIntoView({ behavior: "smooth" });
};

pointer-events

css 종류

pointer-events를 none으로 하면 클릭이 되지 않는다.
auto는 클릭이 된다.

.arrow-up {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 70px;
  height: 70px;
  font-size: 50px;
  border-radius: 50%;
  color: var(--color-blue);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-in;
}

.arrow-up.visible {
  opacity: 1;
  pointer-events: auto;
}

js에서 style 추가하는 법

class or id or tag 이름.style.~~

document.addEventListener("scroll", () => {
  home.style.opacity = 1 - window.scrollY / homeHeight;
});