Tab UI

Previous스크롤 이벤트 Next이벤트 버블링(Event Bubbling)

Last updated 1 year ago

Tab UI

js010.html 복사해서 js011.html 파일 생성 후

body 태그 안의 내용을 전부 삭제

(bootstrap, jquery cdn은 남겨두자)

Tab UI를 만들어 보자

js011.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

  <link rel="stylesheet" href="main.css">
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <style>
    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;
    }
    .orange {
      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;
    }
  </style>
</head>
<body>



  <div class="container mt-5">
    <ul class="list">
      <li class="tab-button">Products</li>
      <li class="tab-button orange">Information</li>
      <li class="tab-button">Shipping</li>
    </ul>
    <div class="tab-content">
      <p>상품설명 탭  Product</p>
    </div>
    <div class="tab-content show">
      <p>스펙설명 탭 Spec</p>
    </div>
    <div class="tab-content">
      <p>배송정보 탭 Shipping</p>
    </div>
  </div>

  <script>
   
  </script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>

products 버튼을 누르면 상품 설명 탭이 보이고, information버튼을 누르면 스펙설명 탭이 보이게 만들면 된다.

💎 javascript 모듈화

css 파일을 main.css로 따로 뺀 것 처럼 js도 모듈화 할 수 있다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Blog about personal projects written mostly in JavaScript with AngularJS and Node.js. MongoDB is a guest too.">
    <meta name="author" content="Kevin Delemme">
    <meta name="fragment" content="!">

    <title>Kevin Delemme - JavaScript Addict - Personal projects written mostly with AngularJS, Node.js and MongoDB</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/style.css" rel="stylesheet">
    <link href="dist/css/font-awesome.min.css" rel="stylesheet">
    <link href="lib/wysiwyg/css/bootstrap3-wysiwyg5.css" rel="stylesheet">
  </head>
  
    <body ng-app="app">

        <div class="container col-sm-12">

            <header class="header">
                <h1 class="header-title">
                    <a href="#">
                        <i class="fa fa-code"></i> Kevin Delemme
                    </a>
                </h1>
            </header>

            <div ng-view></div>
            
        </div>

        <script src="lib/angular/angular.min.js"></script>
        <script src="lib/angular/angular-route.min.js"></script>
        <script src="lib/jquery/jquery-2.0.3.min.js"></script>
        <script src="lib/bootstrap/bootstrap.min.js"></script>
        <script src="dist/js/blog.js"></script>
        <script src="lib/wysiwyg/js/wysihtml5-0.3.0.min.js"></script>
        <script src="lib/wysiwyg/js/bootstrap3-wysihtml5.js"></script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-46674011-1', 'kdelemme.com');
            ga('send', 'pageview');
        </script>
    </body>
</html>

js 폴더를 생성하고 app.js 파일 생성 후

<script src="js/app.js"></script>

html에 <body>태그 제일 아래에 이부분 삽입 하면 app.js의 스크립트 사용 가능

왜 이렇게 할까?

이번에 개발하는 탭 UI를 모든 페이지마다 사용한다고 가정하면

모든 html 파일에 똑같은 js를 복붙해야한다.

이런 귀찮음을 방지하고자 모듈화해서 사용한다.

모듈화를 잘하는 개발자가 진짜 실력있는 개발자다.

다시 돌아와서

products 버튼을 누르면 상품 설명 탭이 보이게 해보자

products 버튼을 누르면 버튼에 orange 클래스 추가

product div 에 show 클래스 추가

이렇게 하면 버그 생김🔥

모든 버튼에 orange 클래스와 div show 클래스 제거

jQuery로 class 셀렉트 하면 document.querySellectAll과 같이 동작 함

$('.클래스명').eq(0) 하면 document.querySellectAll('.클래스명')[0] 과 같은 동작

✨ 과제. 버튼 3개의 탭 기능 구현 해보기

app.js

$('.tab-button').eq(0).on('click', function (){
    $('.tab-button').removeClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(0).addClass('orange');
    $('.tab-content').eq(0).addClass('show');

})

$('.tab-button').eq(1).on('click', function (){
    $('.tab-button').removeClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(1).addClass('orange');
    $('.tab-content').eq(1).addClass('show');

})

$('.tab-button').eq(2).on('click', function (){
    $('.tab-button').removeClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(2).addClass('orange');
    $('.tab-content').eq(2).addClass('show');

})

그런데 이렇게 작성하고 보니

$('.tab-button') 이 계속해서 반복 된다.

이럴땐 변수에 담아서 작성하면 성능 상 이점이 있다.

🎈 Ctrl + R 하면 파일 내에서 바꾸기 가능

🎈 Ctrl + Shift + R 하면 프로젝트 내에서 바꾸기 가능

🎈 Ctrl + F 하면 파일 내에서 검색 가능

🎈 Ctrl + Shift + F 하면 프로젝트 내에서 검색 가능

app.js

var tabBtn = $(".tab-button");
var tabContent = $(".tab-content");

tabBtn.eq(0).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(0).addClass('orange');
    tabContent.eq(0).addClass('show');

})

tabBtn.eq(1).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(1).addClass('orange');
    tabContent.eq(1).addClass('show');

})

tabBtn.eq(2).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(2).addClass('orange');
    tabContent.eq(2).addClass('show');

})

이렇게 바꿔 줄 수 있다.

for 반복문

for(var i = 0; i < 10; i++){
    console.log(i);
}

for 반복문의 기본 형식은 위와 같다

0번째 부터 시작해서 i가 10보다 작으면 아래 코드를 실행하고 i를 +1해준다.

그럼 아까 작성한 js 중 3번이나 똑같은 코드가 반복되는데

이걸 반복문을 쓰면 또 줄일 수 있을 것 같다.

app.js

for (let i = 0; i<3; i++){
    tabBtn.eq(i).on('click', function (){
        tabBtn.removeClass('orange');
        tabContent.removeClass('show');
        tabBtn.eq(i).addClass('orange');
        tabContent.eq(i).addClass('show');

    })
}

위에 반복문에서 let을 쓰는 이유 ?

지난번 변수 선언 때의 var let const를 잘생각해보면 알 수 있다.

for 반복문에서 var는 안되고 let은 가능한 이유?

위의 반복문에서 var로 하면 제대로 동작을 하지않고 let으로 하면 동작한다

왜그럴까????

컴퓨터가 코드를 읽는 순서를 한번 따라가보면 이해가 쉽다.

컴퓨터는 코드를 위에서 부터 읽는다.
for 반복문을 발견하고 반복실행한다.
이벤트 리스너를 만나고 이벤트 리스너는 바로 실행하는 게 아니라 해당 버튼을 클릭할때 실행된다.
그래서 이벤트리스너 내의 코드는 실행하지 않고 지나간다.
그렇게되면 반복문은 끝나서 var i = 3이된다.
반복문이 다 종료되고 이후에 사용자가 버튼을 클릭하면 이제서야 이벤트리스너 안의 코드를 실행한다.
반복문을 실행하려고 보니 현재 var i = 3이네??

tabBtn.eq(3).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(3).addClass('orange');
    tabContent.eq(3).addClass('show');
})

이렇게 코드가 되는데 3번째 버튼은 없다.

그래서 var는 오류나고 let은 다시 반복문돌때 0부터 시작하기때문에 정상동작한다.

지금까지 문법을 나열하고 뒤에가서 뭉뚱그려서 한번에 이것저것 다 해보는 방식이 아니라

하나씩 무언갈 만들어보면서 거기에 문법을 녹여내는 방식이다.

다른 문법과 마찬가지로 이런 문법이 이렇게 할 때 쓰이네

또 다른데는 어떻게 쓰일까를 고민해보면 좋다.

Previous스크롤 이벤트 Next이벤트 버블링(Event Bubbling)

Last updated 1 year ago

js010.html 복사해서 js011.html 파일 생성 후

body 태그 안의 내용을 전부 삭제

(bootstrap, jquery cdn은 남겨두자)

Carbon Design System_carbondesign

Tab UI를 만들어 보자

js011.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

  <link rel="stylesheet" href="main.css">
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <style>
    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;
    }
    .orange {
      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;
    }
  </style>
</head>
<body>



  <div class="container mt-5">
    <ul class="list">
      <li class="tab-button">Products</li>
      <li class="tab-button orange">Information</li>
      <li class="tab-button">Shipping</li>
    </ul>
    <div class="tab-content">
      <p>상품설명 탭  Product</p>
    </div>
    <div class="tab-content show">
      <p>스펙설명 탭 Spec</p>
    </div>
    <div class="tab-content">
      <p>배송정보 탭 Shipping</p>
    </div>
  </div>

  <script>
   
  </script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>

products 버튼을 누르면 상품 설명 탭이 보이고, information버튼을 누르면 스펙설명 탭이 보이게 만들면 된다.

💎 javascript 모듈화

css 파일을 main.css로 따로 뺀 것 처럼 js도 모듈화 할 수 있다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Blog about personal projects written mostly in JavaScript with AngularJS and Node.js. MongoDB is a guest too.">
    <meta name="author" content="Kevin Delemme">
    <meta name="fragment" content="!">

    <title>Kevin Delemme - JavaScript Addict - Personal projects written mostly with AngularJS, Node.js and MongoDB</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/style.css" rel="stylesheet">
    <link href="dist/css/font-awesome.min.css" rel="stylesheet">
    <link href="lib/wysiwyg/css/bootstrap3-wysiwyg5.css" rel="stylesheet">
  </head>
  
    <body ng-app="app">

        <div class="container col-sm-12">

            <header class="header">
                <h1 class="header-title">
                    <a href="#">
                        <i class="fa fa-code"></i> Kevin Delemme
                    </a>
                </h1>
            </header>

            <div ng-view></div>
            
        </div>

        <script src="lib/angular/angular.min.js"></script>
        <script src="lib/angular/angular-route.min.js"></script>
        <script src="lib/jquery/jquery-2.0.3.min.js"></script>
        <script src="lib/bootstrap/bootstrap.min.js"></script>
        <script src="dist/js/blog.js"></script>
        <script src="lib/wysiwyg/js/wysihtml5-0.3.0.min.js"></script>
        <script src="lib/wysiwyg/js/bootstrap3-wysihtml5.js"></script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-46674011-1', 'kdelemme.com');
            ga('send', 'pageview');
        </script>
    </body>
</html>

js 폴더를 생성하고 app.js 파일 생성 후

<script src="js/app.js"></script>

html에 <body>태그 제일 아래에 이부분 삽입 하면 app.js의 스크립트 사용 가능

왜 이렇게 할까?

이번에 개발하는 탭 UI를 모든 페이지마다 사용한다고 가정하면

모든 html 파일에 똑같은 js를 복붙해야한다.

이런 귀찮음을 방지하고자 모듈화해서 사용한다.

모듈화를 잘하는 개발자가 진짜 실력있는 개발자다.

다시 돌아와서

products 버튼을 누르면 상품 설명 탭이 보이게 해보자

products 버튼을 누르면 버튼에 orange 클래스 추가

product div 에 show 클래스 추가

이렇게 하면 버그 생김🔥

모든 버튼에 orange 클래스와 div show 클래스 제거

jQuery로 class 셀렉트 하면 document.querySellectAll과 같이 동작 함

$('.클래스명').eq(0) 하면 document.querySellectAll('.클래스명')[0] 과 같은 동작

✨ 과제. 버튼 3개의 탭 기능 구현 해보기

app.js

$('.tab-button').eq(0).on('click', function (){
    $('.tab-button').removeClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(0).addClass('orange');
    $('.tab-content').eq(0).addClass('show');

})

$('.tab-button').eq(1).on('click', function (){
    $('.tab-button').removeClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(1).addClass('orange');
    $('.tab-content').eq(1).addClass('show');

})

$('.tab-button').eq(2).on('click', function (){
    $('.tab-button').removeClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-button').eq(2).addClass('orange');
    $('.tab-content').eq(2).addClass('show');

})

그런데 이렇게 작성하고 보니

$('.tab-button') 이 계속해서 반복 된다.

이럴땐 변수에 담아서 작성하면 성능 상 이점이 있다.

🎈 Ctrl + R 하면 파일 내에서 바꾸기 가능

🎈 Ctrl + Shift + R 하면 프로젝트 내에서 바꾸기 가능

🎈 Ctrl + F 하면 파일 내에서 검색 가능

🎈 Ctrl + Shift + F 하면 프로젝트 내에서 검색 가능

app.js

var tabBtn = $(".tab-button");
var tabContent = $(".tab-content");

tabBtn.eq(0).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(0).addClass('orange');
    tabContent.eq(0).addClass('show');

})

tabBtn.eq(1).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(1).addClass('orange');
    tabContent.eq(1).addClass('show');

})

tabBtn.eq(2).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(2).addClass('orange');
    tabContent.eq(2).addClass('show');

})

이렇게 바꿔 줄 수 있다.

for 반복문

for(var i = 0; i < 10; i++){
    console.log(i);
}

for 반복문의 기본 형식은 위와 같다

0번째 부터 시작해서 i가 10보다 작으면 아래 코드를 실행하고 i를 +1해준다.

그럼 아까 작성한 js 중 3번이나 똑같은 코드가 반복되는데

이걸 반복문을 쓰면 또 줄일 수 있을 것 같다.

app.js

for (let i = 0; i<3; i++){
    tabBtn.eq(i).on('click', function (){
        tabBtn.removeClass('orange');
        tabContent.removeClass('show');
        tabBtn.eq(i).addClass('orange');
        tabContent.eq(i).addClass('show');

    })
}

위에 반복문에서 let을 쓰는 이유 ?

지난번 변수 선언 때의 var let const를 잘생각해보면 알 수 있다.

for 반복문에서 var는 안되고 let은 가능한 이유?

위의 반복문에서 var로 하면 제대로 동작을 하지않고 let으로 하면 동작한다

왜그럴까????

컴퓨터가 코드를 읽는 순서를 한번 따라가보면 이해가 쉽다.

컴퓨터는 코드를 위에서 부터 읽는다.
for 반복문을 발견하고 반복실행한다.
이벤트 리스너를 만나고 이벤트 리스너는 바로 실행하는 게 아니라 해당 버튼을 클릭할때 실행된다.
그래서 이벤트리스너 내의 코드는 실행하지 않고 지나간다.
그렇게되면 반복문은 끝나서 var i = 3이된다.
반복문이 다 종료되고 이후에 사용자가 버튼을 클릭하면 이제서야 이벤트리스너 안의 코드를 실행한다.
반복문을 실행하려고 보니 현재 var i = 3이네??

tabBtn.eq(3).on('click', function (){
    tabBtn.removeClass('orange');
    tabContent.removeClass('show');
    tabBtn.eq(3).addClass('orange');
    tabContent.eq(3).addClass('show');
})

이렇게 코드가 되는데 3번째 버튼은 없다.

그래서 var는 오류나고 let은 다시 반복문돌때 0부터 시작하기때문에 정상동작한다.

지금까지 문법을 나열하고 뒤에가서 뭉뚱그려서 한번에 이것저것 다 해보는 방식이 아니라

하나씩 무언갈 만들어보면서 거기에 문법을 녹여내는 방식이다.

다른 문법과 마찬가지로 이런 문법이 이렇게 할 때 쓰이네

또 다른데는 어떻게 쓰일까를 고민해보면 좋다.