웹 UI 라이브러리 사이트 모음

이미지 슬라이드
차트
nav-bar
스크롤 바
스크롤 바2
전체화면 스크롤 사이트

css / background-color: transparent;

• 배경색을 투명하게 설정

jQuery / 스크롤 이벤트

$(window).on("scroll", function () {
});

• html을 가져오는 것이 아니라, 따옴표 없이 window에 이벤트를 설정한다.

jQuery 현재 스크롤 위치를 아는 방법

• 맨 위에서 부터 얼마나 떨어져 있는지 알 수 있다.

$(window).scrollTop()

UI / 스크롤을 조금 내리면, 동작하는 스크롤 이벤트

$(window).on("scroll", function () {
  if ($(window).scrollTop() > 100) {
    $(".nav-menu").addClass("nav-black");
    $("#nav-text").removeClass("nav-menu__text");
  } else {
    $(".nav-menu").removeClass("nav-black");
    $("#nav-text").addClass("nav-menu__text");
  }
});

• 스크롤 이벤트 설정
• 스크롤이 100px 내려가면, nav-bar의 배경과 로고 폰트 사이즈를 변경함
• 스크롤을 일정 부분 올리면, nav-bar가 원래 상태가 되도록 설정하였다.

스크롤 이벤트 많이 쓰면, 성능이 느려진다.

• 스크롤 이벤트는 렉이 많이 걸리는 기능이므로 신경써서 구현해야한다.

UI / tab button 만들기

html

• list를 만듦
• 설명부분을 만듦

<div class="container mt-5">
  <ul class="list">
    <li class="tab-button product-button">Products</li>
    <li class="tab-button active information-button">Information</li>
    <li class="tab-button shipping-button">Shipping</li>
  </ul>

  <div class="tab-content product-content">
    <p>상품설명입니다. Product</p>
  </div>
  <div class="tab-content show information-content">
    <p>상품정보입니다. Info</p>
  </div>
  <div class="tab-content shipping-content">
    <p>배송정보입니다. Shipping</p>
  </div>
</div>

css

• list를 옆으로 배치시킴
• list를 담는 ul에 border-bottom을 만듬
• 버튼을 클릭하면 class를 넣음
  • active
• 설명 div를 숨김
  • 버튼 클릭하면 class를 넣음

ul.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}
ul.list::after {
  content: "";
  display: block;
  clear: both;
}
.tab-button {
  display: block;
  padding: 10px 20px 10px 20px;
  float: left;
  margin-right: -1px;
  margin-bottom: -1px;
  color: grey;
  text-decoration: none;
  cursor: pointer;
}
.active {
  border-top: 2px solid orange;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid white;
  border-left: 1px solid #ccc;
  color: black;
  margin-top: -2px;
}
.tab-content {
  display: none;
  padding: 10px;
}
.show {
  display: block;
}

이벤트

• 버튼1 클릭하면, 버튼1에 active class추가, 설명1에 show 추가
• 나머지 버튼,설명(2,3)은 class를 제거해야함
• 결론 : 버튼1 클릭 -> 모든 버튼(1,2,3....) class 제거 -> 버튼 1에 class 추가

$(".tab-button")
  .eq(0)
  .on("click", function () {
    $(".tab-button").removeClass("active");
    $(".tab-button").eq(0).addClass("active");

    $(".tab-content").removeClass("show");
    $(".tab-content").eq(0).addClass("show");
  });

$(".tab-button")
  .eq(1)
  .on("click", function () {
    $(".tab-button").removeClass("active");
    $(".tab-button").eq(1).addClass("active");

    $(".tab-content").removeClass("show");
    $(".tab-content").eq(1).addClass("show");
  });

$(".tab-button")
  .eq(2)
  .on("click", function () {
    $(".tab-button").removeClass("active");
    $(".tab-button").eq(2).addClass("active");

    $(".tab-content").removeClass("show");
    $(".tab-content").eq(2).addClass("show");
  });

확장성있는 코드로 수정

• 숫자 0,1,2만 변경되고, 나머지 부분은 동일
  • 반복문으로 변경가능

for (let i = 0; i < 3; i++) {
  $(".tab-button")
    .eq(i)
    .on("click", function () {
      $(".tab-button").removeClass("active");
      $(".tab-button").eq(i).addClass("active");

      $(".tab-content").removeClass("show");
      $(".tab-content").eq(i).addClass("show");
    });
}

• 아직 완벽하지는 않음
  • 버튼이 추가될때마다 반복문의 i 조건식을 수정해야함
    • i < 버튼 갯수 이런 식으로 조건문을 구성하면, 버튼을 추가시켜도 반복문 코드를 수정안해도 된다.
      • 방법 $(".tab-content").length
        • 의미 : 해당 class의 갯수

for (let i = 0; i < $(".tab-content").length; i++) {
  $(".tab-button")
    .eq(i)
    .on("click", function () {
      $(".tab-button").removeClass("active");
      $(".tab-button").eq(i).addClass("active");

      $(".tab-content").removeClass("show");
      $(".tab-content").eq(i).addClass("show");
    });
}

jQuery / jQuery는 중복된 html을 가져올 때, 모두 가져온다.

• button tag 3개 모두 가져온다.

<button></button>
<button></button>
<button></button>

$("button")

• 1개만 가지고 오려면
  • 제일 위의 버튼을 가지고 온다.

$("button").eq(0).on()