자바스크립트 기초 (12)

새벽로즈·2023년 10월 30일
TIL자바스크립트
0

TIL

목록 보기
33/72
post-thumbnail
코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

position: sticky;

  • 스크롤 하다가 일부 섹션에 들어오면 position: fixed 처럼 해당 섹션의 일부를 화면에 고정할 수 있음

사용법 : osition: sticky;와 위치 지정해주기(left, top, right, bottom 등등)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <style>
      .card-background {
        height: 3000px;
        margin-top: 800px;
        margin-bottom: 1600px;
      }
      .card-box img {
        display: block;
        margin: auto;
        max-width: 80%;
      }
      .card-box {
        position: sticky;
        top: 400px;
        margin-top: 200px;
        transition: all 0.2s;
      }
    </style>
  </head>
  <body>
    <div class="card-background">
      <div class="card-box"><img src="card1.png" /></div>
      <div class="card-box"><img src="card2.png" /></div>
      <div class="card-box"><img src="card3.png" /></div>
    </div>
    <script>
      //704 844 1265
      // window.addEventListener("scroll", function () {
      //   var 높이 = document.querySelector("html").scrollTop;
      //   console.log(높이);
      //   var y = (-1 / 500) * 높이 + 115 / 50;
      //   $(".card-box").eq(0).css("opacity", y);
      // });

      window.addEventListener("scroll", function () {
        //1. 높이 값 구하기
        var 높이 =
          document.documentElement.scrollTop || document.body.scrollTop;
        //console.log(높이);
        var y = (-1 / 500) * 높이 + 115 / 50;
        var z = (-1 / 5000) * 높이 + 565 / 500;
        //2. 적용하기 
        document.querySelectorAll(".card-box")[0].style.opacity = y;
        document.querySelectorAll(
          ".card-box"
        )[0].style.transform = `scale(${z})`;
        // var cardBox = document.querySelectorAll(".card-box")[0];
        // if (cardBox) {
        //     cardBox.style.opacity = y;
        // }
      });
    </script>
  </body>
</html>

☞ 개인적인 문제점 : 1차 함수를 구할줄...모른다 ^-T.. 수학관련 공부도 해야겠다.

마우스 관련 이벤트

addEventListener에는 scroll, click 뿐만이 아니라 마우스 관련 이벤트도 장착이 가능하다.
mousedown (어떤 요소에 마우스버튼 눌렀을 때)
mouseup (어떤 요소에 마우스버튼 뗐을 때)
mousemove (어떤 요소위에서 마우스 이동할 때)

      document
        .querySelectorAll(".slide-box")[0]
        .addEventListener("mousedown", function (e) {
          console.log(e.clientX);
        });

☞ 마우스 버튼을 누른 지점의 위치를 찍을수 있다.

스와이프 가능한 캐러셀 슬라이드 만들기

      //모든 곳에서 써야하니까 전역으로 선언
      var 시작좌표 = 0;
      var 클릭 = false;
      //마우스 다운 이벤트
      document
        .querySelectorAll(".slide-box")[0]
        .addEventListener("mousedown", function (e) {
          시작좌표 = e.clientX;
          클릭 = true;
        });
        //마우스 이동 이벤트
      document
        .querySelectorAll(".slide-box")[0]
        .addEventListener("mousemove", function (e) {
          if (클릭 == true) {
            //console.log(e.clientX - 시작좌표);
            document.querySelector(
              ".slide-container"
            ).style.transform = `translateX(${e.clientX - 시작좌표}px)`;
          }
        });
        //마우스 업 이벤트
      document
        .querySelectorAll(".slide-box")[0]
        .addEventListener("mouseup", function (e) {
          클릭 = false;
          if (e.clientX - 시작좌표 < -100) {
            document.querySelector(".slide-container").style.transition =
              "all 0.5s";
            document.querySelector(".slide-container").style.transform =
              "translateX(-100vw)";
          } else {
            document.querySelector(".slide-container").style.transition =
              "all 0.5s";
            document.querySelector(".slide-container").style.transform =
              "translateX(0vw)";
          }
        });
        //터치 시작 이벤트
      document
        .querySelectorAll(".slide-box")[0]
        .addEventListener("touchstart", function (e) {
          시작좌표 = e.touches[0].clientX;
          클릭 = true;
        });
        //터치 이동 이벤트
      document
        .querySelectorAll(".slide-box")[0]
        .addEventListener("touchmove", function (e) {
          if (클릭 == true) {
            //console.log(e.clientX - 시작좌표);
            document.querySelector(
              ".slide-container"
            ).style.transform = `translateX(${e.clientX - 시작좌표}px)`;
          }
        });
        //터치 종료 이벤트
      document
        .querySelectorAll(".slide-box")[0]
        .addEventListener("touchend", function (e) {
          클릭 = false;
          if (e.changedTouches[0].clientX - 시작좌표 < -100) {
            document.querySelector(".slide-container").style.transition =
              "all 0.5s";
            document.querySelector(".slide-container").style.transform =
              "translateX(-100vw)";
          } else {
            document.querySelector(".slide-container").style.transition =
              "all 0.5s";
            document.querySelector(".slide-container").style.transform =
              "translateX(0vw)";
          }
          // 트랜지션 완료 후 트랜지션을 제거하여 자연스럽게 변화되도록 함
          setTimeout(function () {
            document.querySelector(".slide-container").style.transition =
              "none";
          }, 500);
        });

  1. 개요
    이 코드는 슬라이드 박스를 드래그하거나 터치하여 좌우로 이동시키는 간단한 슬라이드쇼를 구현하기 위해 만듬

  2. 원리
    1) 마우스 다운 이벤트 처리 (mousedown):
    사용자가 슬라이드 박스를 클릭했을 때 시작 좌표를 기록해서 이후에 마우스 이동 및 업 이벤트에서 현재 마우스 위치와 비교하여 이동 거리를 계산하는 데 사용함
    시작좌표 변수를 초기화하고, 클릭 상태를 활성화됨

2) 마우스 이동 이벤트 처리 (mousemove):
마우스가 이동할 때마다 호출되고 클릭 상태일 때에만 동작함.
현재 마우스 위치와 시작 좌표를 비교하여 슬라이드 컨테이너를 이동시킴
사용자에게 드래그 중임을 시각적으로 보여주는 역할함

3) 마우스 업 이벤트 처리 (mouseup):
사용자가 마우스 클릭을 해제했을 때 호출됨
클릭 상태를 해제하고, 이동한 거리에 따라 슬라이드 위치를 조정함
이동 거리가 특정 값 이상이면 다음 슬라이드로 이동하도록 설정하고, 그렇지 않으면 원래 위치로 돌아감
트랜지션 효과를 적용하여 부드러운 이동이 되고 난 후에 트랜지션을 제거하여 자연스러운 화면 전환이 가능하도록 함

4) 터치 시작 이벤트 (touchstart):

터치가 시작되었을 때 호출됨
여러 터치 포인트 중에서 첫 번째 터치 포인트의 정보를 사용하여 시작 좌표를 기록함
이 정보는 이후에 터치 이동 및 종료 이벤트에서 현재 터치 위치와 비교하여 이동 거리를 계산하는 데 사용됨
시작좌표 변수를 초기화하고, 클릭 상태를 활성화함

5)터치 이동 이벤트 (touchmove):
터치 중인 상태에서 이동할 때 호출됨
여러 터치 포인트 중에서 첫 번째 터치 포인트의 정보를 사용하여 현재 터치 위치와 시작 좌표를 비교하여 슬라이드 컨테이너를 이동시킴
사용자에게 드래그 중임을 시각적으로 보여주는 역할을 하게됨

6)터치 엔드 이벤트 (touchend):
터치가 종료되었을 때 호출됨
클릭 상태를 해제하고, 이동한 거리에 따라 슬라이드 위치를 조정함
여러 터치 포인트 중에서 첫 번째 터치 포인트와 시작 좌표를 비교하여 슬라이드 위치를 조정함
터치 이동 및 종료 이벤트에서의 로직은 마우스 이벤트와 유사하지만, 터치 이벤트에 특화된 정보를 사용함

※터치 이벤트에 특화된 정보 사용 : e.touches와 e.changedTouches를 통해 현재 터치된 손가락의 정보에 접근할 수 있다는 것을 의미함. 여러 터치 포인트를 다룰 때 각각의 터치 포인트에 대한 좌표 및 상태를 추적하는 데 사용됨. 코드에서는 터치 이벤트의 시작(touchstart)과 종료(touchend) 시에 이걸 활용하여 슬라이드 이동 거리를 계산하고, 이에 따라 슬라이드의 위치를 조정함.

switch 문법

다양한 조건을 할수 있는 if와 다르게 switch는 1개의 변수만 가능함
코드가 간결해보인다는 장점이 있음;

      let 변수 = 2 + 2;
      switch (변수) {
        case 3:
          alert("변수가 3임");
          break;
        case 4:
          alert("변수가 4임");
          break;
        default: //위의 조건에 해당되는 것이 없을때
          alert("아무것도 아님");
      }

☞ break가 없으면 전부 다 실행되기 때문에 탈출할 코드가 필요함

버튼 클릭하면 특정 alert가 뜨는 문법 switch로 가능

     document.querySelector("#quiz").addEventListener("click", function (e) {
        switch (e.target.innerHTML) {
          case "연인":
            alert("사랑꾼이시군요!");
            break;
          case "친구":
            alert("우정을 중요하게 여기는군요!");
            break;
          case "반려동물":
            alert("동물을 좋아하는군요!");
            break;
        }
        // alert(e.target.innerHTML); //실제 클릭한 문자열이 출력됨
      });
profile
새벽로즈
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰
이전 포스트

[개인과제] 눈물의 영화 검색 사이트(4)

다음 포스트

자바스크립트 기본 문법 정리

0개의 댓글