Tab UI

js010.html ๋ณต์‚ฌํ•ด์„œ js011.html ํŒŒ์ผ ์ƒ์„ฑ ํ›„

body ํƒœ๊ทธ ์•ˆ์˜ ๋‚ด์šฉ์„ ์ „๋ถ€ ์‚ญ์ œ

(bootstrap, jquery cdn์€ ๋‚จ๊ฒจ๋‘์ž)

Tab UI ์˜ˆ์‹œ

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์œผ๋กœ ํ•˜๋ฉด ๋™์ž‘ํ•œ๋‹ค

์™œ๊ทธ๋Ÿด๊นŒ????

์ปดํ“จํ„ฐ๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ฝ๋Š” ์ˆœ์„œ๋ฅผ ํ•œ๋ฒˆ ๋”ฐ๋ผ๊ฐ€๋ณด๋ฉด ์ดํ•ด๊ฐ€ ์‰ฝ๋‹ค.

  1. ์ปดํ“จํ„ฐ๋Š” ์ฝ”๋“œ๋ฅผ ์œ„์—์„œ ๋ถ€ํ„ฐ ์ฝ๋Š”๋‹ค.

  2. for ๋ฐ˜๋ณต๋ฌธ์„ ๋ฐœ๊ฒฌํ•˜๊ณ  ๋ฐ˜๋ณต์‹คํ–‰ํ•œ๋‹ค.

  3. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋งŒ๋‚˜๊ณ  ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ๋ฐ”๋กœ ์‹คํ–‰ํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ ํ•ด๋‹น ๋ฒ„ํŠผ์„ ํด๋ฆญํ• ๋•Œ ์‹คํ–‰๋œ๋‹ค.

  4. ๊ทธ๋ž˜์„œ ์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ ๋‚ด์˜ ์ฝ”๋“œ๋Š” ์‹คํ–‰ํ•˜์ง€ ์•Š๊ณ  ์ง€๋‚˜๊ฐ„๋‹ค.

  5. ๊ทธ๋ ‡๊ฒŒ๋˜๋ฉด ๋ฐ˜๋ณต๋ฌธ์€ ๋๋‚˜์„œ var i = 3์ด๋œ๋‹ค.

  6. ๋ฐ˜๋ณต๋ฌธ์ด ๋‹ค ์ข…๋ฃŒ๋˜๊ณ  ์ดํ›„์— ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ด์ œ์„œ์•ผ ์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ ์•ˆ์˜ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

  7. ๋ฐ˜๋ณต๋ฌธ์„ ์‹คํ–‰ํ•˜๋ ค๊ณ  ๋ณด๋‹ˆ ํ˜„์žฌ 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๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๊ธฐ๋•Œ๋ฌธ์— ์ •์ƒ๋™์ž‘ํ•œ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ๋ฌธ๋ฒ•์„ ๋‚˜์—ดํ•˜๊ณ  ๋’ค์—๊ฐ€์„œ ๋ญ‰๋šฑ๊ทธ๋ ค์„œ ํ•œ๋ฒˆ์— ์ด๊ฒƒ์ €๊ฒƒ ๋‹ค ํ•ด๋ณด๋Š” ๋ฐฉ์‹์ด ์•„๋‹ˆ๋ผ

ํ•˜๋‚˜์”ฉ ๋ฌด์–ธ๊ฐˆ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ ๊ฑฐ๊ธฐ์— ๋ฌธ๋ฒ•์„ ๋…น์—ฌ๋‚ด๋Š” ๋ฐฉ์‹์ด๋‹ค.

๋‹ค๋ฅธ ๋ฌธ๋ฒ•๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ด๋Ÿฐ ๋ฌธ๋ฒ•์ด ์ด๋ ‡๊ฒŒ ํ•  ๋•Œ ์“ฐ์ด๋„ค

๋˜ ๋‹ค๋ฅธ๋ฐ๋Š” ์–ด๋–ป๊ฒŒ ์“ฐ์ผ๊นŒ๋ฅผ ๊ณ ๋ฏผํ•ด๋ณด๋ฉด ์ข‹๋‹ค.

Last updated