6월3일14일차 - sticky 화면 5:5 분할, [js] scrollTop

[수업 시간에 5:5 분할 슬라이드를 구현했습니다.]

---

filter : grayscale;을 통해서 img를 흑백으로 바꿀 수 있습니다. (0~1)
brightness는 이미지 밝기를 조절할 수 있습니다. (0~1)

.section03 .container figure {

  height: 100vh;

  filter: grayscale(1) brightness(0.4);

}

---

flex: 0 0 atuo; 세번째 속성

 박스의 크기를 부모 기준으로 몇 % 으로 할지 정할 수 있습니다. 

0 0 50%로 설정하면 부모의 절반의 크기를 갖게 됩니다. 

0 0 0으로 설정하여도 이미지 외의 내용물(글자와 같은 것들)이 들어있다면 글자의 크기에 맞춰 이미지가 줄어듭니다.  

  flex: 0 0 50%; /* 이미지 사이즈를 맞추기 위해 사용됩니다. */

---

 

 

  letter-spacing: 1em;

글자 사이의 간격을 띄울 때 사용합니다.

---

  $(".cover a").on("click", function (e) {

    e.preventDefault();

    let idx = $(this).parent().index();

    let h = $(".sticky").height();

    $("html, body").animate({ scrollTop: (idx + 1) * h }, 1000);

  });

});

---

    e.preventDefault();

event.preventDefault(); 함수는 기본적으로 설정된 동작을 못 하도록 막습니다.

a 를 클릭하면 해당 href 로 이동되거나 url이 없을 경우 새로고침 되는 것이 default 인데, 이 기능을 없앱니다.

button의 submit을 실행하면 submit을 하는 동시에 새로고침을 하는 것이 default 인데, 이 기능을 없애고 submit만을 보낼 수 있습니다.

---

    let idx = $(this).parent().index();

부모의 index를 가져옵니다.

---

    let h = $(".sticky").height();

    $("html").animate({ scrollTop: (idx + 1) * h }, 1000);

.sticky는 모든 section의 class 입니다. section의 높이는 100vh로 설정이 되어 있습니다.

여기에 html에 대하여 scrollTop 애니메이션 효과를 줍니다.

높이({ scrollTop: (idx + 1) * h })와 시간(1000ms)을 인자로 받습니다.