8월08일57일차 - jquery, css class로 여러번 적용, 코딩팁!

리액트에서 component가 될 부분의 class 명은 첫 글자를 대문자로 합니다.

 

 

jquery에서 css 속성을 {}로 변경하는 방법입니다.
    $('.TopBanner').css({
      display: 'none'
    })

js로 class를 toggle하는 방법입니다.
  function closeBanner() {
    document.querySelector(".TopBanner").classList.toggle("on");
  }

함수선언식으로 표현하는 방법입니다.
  var closeBanner = () => {
    document.querySelector(".TopBanner").classList.toggle("on");
  }
  
jquery로 slideToggle을 적용하면 편리하게 슬라이드 애니메이션을 구현할 수 있습니다.
  const closeBanner = () => {
    $(".TopBanner").slideToggle();
  };

---

figure안에 글자와 이미지를 포함시키기 위해 div를 넣어 구분해도 됩니다.
          <figure>
            <div class="box">
              <img src="./img/MainContent01.jpg" alt="" />
            </div>
            <div class="tit">엘리베이터</div>
            <p class="dec">단순한 수직운송수단을 넘어 빌딩의 가치를 높여 드립니다.</p>
            <a href="#!">자세히 보기</a>
          </figure>

 

똑같은 style을 계속 적용할 것이라면 전역으로 이용할 class로 만들어 줍니다.
            <a href="#!" class="btn">자세히 보기 <i class="xi-angle-right"></i></a>
.btn {
  display: inline-block;
  border: 1px solid #008850;
  padding: 10px 20px;
  color: #008850;
}

 

background를 반만 입히는 방법입니다.
.Product {
  background: linear-gradient(#008850 50%, transparent 50%);
}

 

slick에 있는 responsive를 이용하면 반응형이 되었을 때 슬라이드 옵션을 바꾸기 쉽습니다.
  $(".ProductSlider").slick({
    arrows: false,
    slidesToShow: 5,
    responsive: [
      {
        breakpoint: 1230,
        settings: {
          slidesToShow: 1,
          dots: true,
        },
      },
    ],
  });
  
  
주소는 address tag 안에 넣습니다.
<address></address>


toggleClass와 같이 자주 쓰이는 기능은 함수로 만들어 둡니다.
  function toggleClass() {
    $(this).toggleClass("on");
  }
  $(".pop li").on("click", toggleClass);
  
  

align-self로 박스 내에서 위치를 정할 수 있습니다.
.Footer .popup i {
  align-self: center;
}




반응형 폰트는 10px -> 5px로 작게합니다. 반응형으로 바꿀 때 가독성을 신경써야 합니다.

반응형으로 편하게 바꾸고자 한다면 flex-direction을 column으로 만들면 되도록 배치하는 것이 기본입니다.
  .Gnb > ul {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }