프론트엔드 공부 - 02

김민성·2022년 8월 30일
0

front-end

목록 보기
2/2

좌우 버튼 및 영역을 클릭하면 해당 테두리의 색이 변하게 해보기

  • html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    
      <link rel="stylesheet" href="./index.css">
    </head>
    <body>
    
      <div class="slider">
          <div class="btns">
              <button></button>
              <button></button>
          </div>
    
          <div class="slides">
              <div class="active"></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
          </div>
      </div>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
      <script src="./index.js"></script>
    </body>
    </html>
  • css

    .slider {
      padding: 50px;    
    }
    
    button {
        font-size: 40px;
    }
    
    .slides {
        display: flex;
    }
    
    .slides > div {
        width: 20%;
        height: 100px;
        border: 10px solid green;
    }
    
    .active {
        border-color: red !important;
    }
  • js

    let order = 0;
    
    /* 좌버튼 */
    $('.btns > button').eq(0).on('click', function () {
        if(order !== 0) {
            order--;
        }
    
        $('.slides > div').removeClass('active');
        $('.slides > div').eq(order).addClass('active');
    })
    
    /* 우버튼 */
    $('.btns > button').eq(1).on('click', function () {
        if(order !== 4) {
            order++;
        }
    
        $('.slides > div').removeClass('active');
        $('.slides > div').eq(order).addClass('active');
    })
    
    $('.slides > div').on('click', function (event) {
        /* 
         * event.target : 생 자바스크립트 
         */
        const target = $(event.target);
        const index = target.index();
    
        order = index;
    
        $('.slides > div').removeClass('active');
        $('.slides > div').eq(order).addClass('active');
    })
  • 결과 화면

0개의 댓글