[코딩애플] JavaScript 입문level 2 공부 기록 2

동화·2023년 2월 28일

코딩애플

목록 보기

3/7

이미지 슬라이드 만들기 (carousel)

가로로 이미지를 길게 배치한다.

    <div style="overflow: hidden">
      <!-- overflow: hidden -> 스크롤 바 안생김 -->
      <div class="slide-container">
        <div class="slide-box">
          <img src="car1.png" />
        </div>
        <div class="slide-box">
          <img src="car2.png" />
        </div>
        <div class="slide-box">
          <img src="car3.png" />
        </div>
      </div>
    </div>

.slide-container {
  width: 300vw;
  /* vw : 브라우저 폭 = 100vw */
  transition: all 1s;
}

최종화면 (이동시 도착화면) 을 지정해 그쪽으로 가게 이벤트 설정

transform: translateX(-100vw);
혹은
margin-left: -100vw;

두 가지 다 같은 방식으로 저걸 실행해보면 2번째 사진이 보이는 걸 확인할 수 있음.

버튼 누르면 이게 이렇게 움직이게 만들어줘~ 실행

	<button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

$(".slide-2").on("click", function () {
      // transform: translateX(-100vw) 해달라~
      $(".slide-container").css("transform", "translateX(-100vw)");
});
$(".slide-3").on("click", function () {
      // transform: translateX(-200vw) 해달라~
      $(".slide-container").css("transform", "translateX(-200vw)");
});
$(".slide-1").on("click", function () {
      // transform: translateX 아무것도 없던 상태로~ 해달라~
      // $(".slide-container").css("transform", "");
      $(".slide-container").css("transform", "translateX(0vw)");
});

이전/ 다음 버튼 구현

    <button class="next">다음</button>
    <button class="before">이전</button>

// 다음 버튼 누르면
// 지금 보이는 사진이 1이면 2번 사진 보여주세요
// 지금 보이는 사진이 2이면 3번 사진 보여주세요

다음 버튼 : 위 수도코드 대로 실행

      let 현재사진 = 1;
      $(".next").on("click", function () {
        if (현재사진 === 1) {
          $(".slide-container").css("transform", "translateX(-100vw)");
          현재사진++;
        } else if (현재사진 === 2) {
          $(".slide-container").css("transform", "translateX(-200vw)");
          현재사진++;
        }
      });

현재사진을 변수로 지정해 초깃값을 정해주고 옆으로 넘길 때마다 숫자 추가 ++ 해주어야함

확장성 있는 코드로 바꾸기

      $(".next").on("click", function () {
        $(".slide-container").css(
          "transform",
          "translateX(-" + 현재사진 + "00vw)"
        );
        현재사진++;
      });
        console.log("-" + 현재사진 + "00vw");

사진이 3장이 아니라 여러 장일 경우 else if~ 를 계속 추가해줄 것이아니라 이렇게 코드를 바꿈으로써 4장이 넘어가도 계속 옆으로 넘어가게 설정

이전 버튼 구현

	$(".before").on("click", function () {
        if (현재사진 === 3) {
          $(".slide-container").css("transform", "translateX(-100vw)");
          현재사진--;
        } else if (현재사진 === 2) {
          $(".slide-container").css("transform", "translateX(0vw)");
          현재사진--;
        }
     });

결과물

스크롤 이벤트

scroll eventlistner

window.addEventListener("scroll", function () {
     // window.scrollY 
 	 // window.pageYOffset
     // window.scrollTo(x,y)
     // window.scrollBy(0,100)
});
// jquery형 scrollY랑 똑같음 ()사이에 숫자 넣으면 그렇게 밑으로 내려줌

window.scrollY or window.pageYOffset : 유저가 얼마나 스크롤바 내렸나

window.scrollTo(0,100) : x->y까지 강제로 스크롤하기
window.scrollBy(0,100) : 현재 위치에서 100만큼 스크롤
(원래 둘다 순간이동함-> 스르륵 내려오는 건 부트스트랩 때문)

 :root {
 	scroll-behavior: auto
 }

설정해 놓으면 원래 상태로 돌아옴

스크롤바 내리면 로고폰트 작게

상단바 생성

<nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">JSShop</span>
        <span class="ms-auto mx-3 badge bd-dark">Dark 🔄</span>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div id="widthbar"></div>
    </nav>

상단바 고정, 로고 폰트 사이즈 지정

.navbar {
  /* 상단고정  */
  position: fixed;
  width: 100%;
  /* 앞으로 보내기, 뒤로 보내기 */
  z-index: 5;
}
.navbar-brand {
  font-size: 30px;
  transition: all 1s;
}

근데 여기서 문제가 있었다
부트스트랩에서 자동으로 상단 고정이 안되어있는데 그게 상위여서, 내가 설정한 position: fixed가 먹히질 않았던 것.

그래서 인터넷을 찾아 해결했다.
fixed-top을 추가해주면 되었음

<nav class="navbar fixed-top navbar-light bg-light">
  ...
</nav>

이런식으로 추가하면 된다.

스크롤이 더 많이 생기게 div 하나 추가해주기

<div style="height: 1000px"></div>

별건 아니지만 그래도 기록하려 넣어봤따. ㅎ

페이지 스크롤바 100px 내리면 로고 폰트사이즈 작게 하는 식 세우기

위에서 나온 이벤트 리스너를 이용한다.

$(window).on("scroll", function () {
    if (window.scrollY > 100) {
       $(".navbar-brand").css("font-size", "20px");
    } else {
       $(".navbar-brand").css("font-size", "25px");
    }
});

결과물

박스 끝까지 스크롤시 알림 띄우기

div 박스 스크롤바 내린 양

박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서부터 얼마나 내렸는지 알려줌

$(".lorem").on("scroll", function () {
     var 스크롤양 = document.querySelector(".lorem").scrollTop;
     // console.log(스크롤양);
});

현재 페이지 스크롤양도 .scrollTop으로 구할 수 있다.
html 태그 찾아서 .scrollTop 붙이면 됨

div 박스 높이 구하는 법

 $(".lorem").on("scroll", function () {
      var 스크롤양 = document.querySelector(".lorem").scrollTop;
      var 실제높이 = document.querySelector(".lorem").scrollHeight;
      console.log(스크롤양, 실제높이);
 );

근데 이걸 끝까지 내려도 같아지지가 않음
왜냐면 박스 높이를 계산하지 않은 것이기 떄문

구현

회원 약관 모양으로 하나 생성

<div style="margin: 50px 10px 0 50px">
      <h2>회원 약관</h2>
      <!-- overflow-y: 내용물 넘치면 스크롤바 생성해줌 -->
      <div
        class="lorem"
        style="width: 600px; height: 100px; overflow-y: scroll"
      >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas
        voluptatum minus praesentium fugit debitis at, laborum ipsa itaque
        placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae
        consectetur praesentium exercitationem. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium
        fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius.
        Nostrum perspiciatis, eligendi quae consectetur praesentium
        exercitationem. Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Quae voluptas voluptatum minus praesentium fugit debitis at,
        laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis,
        eligendi quae consectetur praesentium exercitationem. Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus
        praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi
        eius. Nostrum perspiciatis, eligendi quae consectetur praesentium
        exercitationem. 
        <!-- 아무 말임 -->
      </div>
    </div>

수도 코드대로 구현

div 스크롤바 내린 양 + div가 화면에 보이는 높이 === div 실제높이일 경우 alert 띄워주세요~
❗️근데 스크롤 내린 양은 정수이기 때문에 끝에서 10px 정도 남기고 짜는 것이 좋음 (나는 4로함.!!)

 $(".lorem").on("scroll", function () {
        var 스크롤양 = document.querySelector(".lorem").scrollTop;
        var 실제높이 = document.querySelector(".lorem").scrollHeight;
        var 높이 = document.querySelector(".lorem").clientHeight;
        // console.log(스크롤양, 실제높이);
        if (스크롤양 + 높이 > 실제높이 - 4) {
          alert("약관을 모두 읽었어라");
        }
      });