ckrnckr12

<pre><code class="language-css">  /* /모바일버전 */
  @media (max-width: 768px) {
    /*html {
      scroll-behavior: smooth;
    }*/
    /* Entire Layout */
    .cd-section {
      height: auto;
    }
    .cd-section > div {
      height: auto;
    }
    .content {
      position: static;
      width: 100%;
      height: 100%;
    }
    
    /* Header */
    header {
      transition: 0.5s;
      /* 네비게이션을 hiring이 가리지 않게 */
      z-index: 1;
    }
    header.active {
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }
    .menu {
      display: block;
    }
    .slogan {
      display: none;
    }
    .gnb {
      background-color: #fff;
      position: fixed;
      top: 0;
      right: -270px;
      width: 250px;
      height: 100vh;
      box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
      transition: 0.5s;
    }
    .gnb.active {
      right: 0;
    }
    .menu {
      line-height: 40px;
      margin-top: 60px;
    }
    .menu a {
      text-align: right;
      display: block;
      padding-right: 20px;
      color: #000;
      font-size: 20px;
    }
    
    /* Trigger */
    .trigger {
      display: block;
      width: 24px;
      height: 14px;
      position: absolute;
      right: 20px;
      top: 20px;
    }
    .trigger span {
      position: absolute;
      height: 1px;
      width: 100%;
      background-color: #000;
      transition: 0.5s;
    }
    .trigger span:nth-child(1) {
      top: 0;
    }
    .trigger span:nth-child(2) {
      top: 50%;
      width: 80%;
    }
    .trigger span:nth-child(3) {
      top: 100%;
    }
    .trigger.active span:nth-child(1) {
      top: 50%;
      transform: rotate(45deg)
    }
    .trigger.active span:nth-child(2) {
      top: 50%;
      width: 80%;
      opacity: 0;
    }
    .trigger.active span:nth-child(3) {
      top: 50%;
      transform: rotate(-45deg)
    }
    
    /* Gototop */
    .gototop {
      position: fixed;
      bottom: 20px;
      left: 20px;
      border: 1px solid #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      /* 텍스트는 정확하게 맞지만 이미지는 조정필요 */
      line-height: 50px;
      transform: translateY(30px);
      opacity: 0;
      transition: 0.5s;
    }
    .gototop.active {
      opacity: 1;
      transform: translateY(0);
    }
    .btn-hiring {
      right: 20px;
      bottom: 20px;
    }
  }</code></pre><p>&nbsp;</p><pre><code>  $(function(){
    // Trigger
    $('.trigger').click(function(){
      $(this).toggleClass('active')
      $('.gnb').toggleClass('active')
    })
    $('section, .menu a').click(function(){
      $('.gnb').removeClass('active')
      $('.trigger').removeClass('active')
    })
    /* Smooth Scrolling */
    $('.menu a, .gototop').click(function(e){
      $.scrollTo(this.hash || 0, 900)
    })
    // Change CSS with Scroll
    $(window).scroll(function(){
      if($(window).scrollTop() > 50) {
        $('header, .gototop').addClass('active')
      }
      // if를 만족하면 else실행
      else {
        $('header, .gototop').removeClass('active')
      }   
    })
  })</code></pre><p>글자수 제한으로 추가적인 코드올렸습니다!</p>

ckrnckr12

Posts