์ƒ์„ธ ์ปจํ…์ธ 

๋ณธ๋ฌธ ์ œ๋ชฉ

[Web ๊ฐœ๋ฐœ] Day and Night Mode #1 (jQuery, Bootstrap)

PROGRAMMING/Web

by koharin 2021. 2. 2. 03:01

๋ณธ๋ฌธ

728x90
๋ฐ˜์‘ํ˜•

๐Ÿ’ป ๊ตฌํ˜„์ฝ”๋“œ

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <title>๐Ÿ˜ŽKOHARIN๐Ÿ˜Ž</title>
    <style>
        .dark{
            background-color:black;
            color:white;
        }
        
    </style>
</head>
<body>
    
    <article>
        <header>
            <h2>๐ŸŒžDay and ๐ŸŒ™Night Mode</h2>
            <p>
            <button type="button" class="btn btn-outline-light" id="dnn">Light</button>
            <label>๐Ÿ‘ˆ click button here.</label></p>
        </header>
            <p>Which color? Black or White??</p>   
    </article>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="../bootstrap-4.6.0-dist/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#dnn').click(function(){
                $('body').toggleClass('dark');
            })

        });

    </script>
    
</body>
</html>

 

  • toggleClass: body ์š”์†Œ์— dark ํด๋ž˜์Šค๊ฐ€ ์žˆ์œผ๋ฉด ์ถ”๊ฐ€, ์—†์œผ๋ฉด ์ œ๊ฑฐํ•œ๋‹ค.
  • ๋”ฐ๋ผ์„œ default๋กœ๋Š” background-color: white, color: black์ด์—ˆ๋‹ค๊ฐ€, dnn์„ id๋กœ ๊ฐ–๋Š” ์š”์†Œ๋ฅผ ํด๋ฆญํ•˜๋ฉด body์—์„œ dark ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.

 

โœ… ๋ฒ„ํŠผ ํด๋ฆญ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ: jQuery

$(document).ready(function(){
	// do somthing
});

$(function () {
  // Do something...
});
  • ์œ„์˜ jQuery ๊ตฌ๋ฌธ์€, DOM์ด ์™„์ „ํžˆ ๋กœ๋“œ๋˜๊ธฐ ์ „๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ๋‹ค๊ฐ€, ์™„์ „ํžˆ ๋กœ๋“œ๋˜๋ฉด ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.
  • ๋‘๋ฒˆ์งธ ์ฝ”๋“œ๋Š” ์œ„์˜ ์ฝ”๋“œ๋ฅผ ๊ฐ„ํŽธํ™”ํ•œ ๊ฒƒ์ด๋‹ค.

 

 

โœ… ๋ฒ„ํŠผ: Bootstrap

<button type="button" class="btn btn-light" id="dnn">Day</button>
<button type="button" class="btn btn-dark" id="dnn">Night</button>
<button type="button" class="btn btn-outline-light" id="dnn">Day</button>
<button type="button" class="btn btn-outline-dark" id="dnn">Night</button>

  • Bootstrap์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด bootstrap ํด๋” ๊ฒฝ๋กœ ๋‚ด์˜ js/bootstrap.min.js ํŒŒ์ผ์„ <script> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.
  • button์€ <button> ํƒœ๊ทธ, ๋˜๋Š” <input> ํƒœ๊ทธ์—์„œ type="button"์„ ์ฃผ๋Š” ๊ฒƒ์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • class๋กœ ์—ฌ๋Ÿฌ๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ, Day์˜ ๊ฒฝ์šฐ "btn btn-light" ๋˜๋Š” "btn btn-outline-light" ํด๋ž˜์Šค๋ฅผ, Night์˜ ๊ฒฝ์šฐ "btn btn-dark" ๋˜๋Š” "btn btn-outline-dark" ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ‘œํ˜„ํ•œ๋‹ค.

 

 

 

 

โœ… ๊ฒฐ๊ณผ

  • Day์˜ ๊ฒฝ์šฐ, ๋ฒ„ํŠผ์ด ์—†๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ๋ฒ„ํŠผ์— ์ปค์„œ๋ฅผ ๋†“์œผ๋ฉด Light ๋ฌธ์ž์—ด์ด ๋ณด์ธ๋‹ค..!

 

โœ… ๋‹ค์Œ์œผ๋กœ ์ถ”๊ฐ€ํ•  ๊ธฐ๋Šฅ

  • Day ๋ฒ„ํŠผ์ด์—ˆ์œผ๋ฉด button ํด๋ž˜์Šค๊ฐ€ "btn btn-outline-dark", ํ…์ŠคํŠธ๊ฐ€ "Night"์œผ๋กœ ๋ฐ”๋€๋‹ค.
  • Night ๋ฒ„ํŠผ์ด์—ˆ์œผ๋ฉด btton ํด๋ž˜์Šค๊ฐ€ "btn btn-outline-light", ํ…์ŠคํŠธ๊ฐ€ "Day"๋กœ ๋ฐ”๋€๋‹ค.
728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'PROGRAMMING > Web' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Web ๊ฐœ๋ฐœ] Day and Night Mode #2 (jQuery, Bootstrap)  (0) 2021.02.19
jQuery #1  (0) 2021.02.18
[JavaScript] JavaScript #5: ์‹คํ–‰ ์ปจํ…์ŠคํŠธ  (0) 2021.02.01
[JavaScript] this  (0) 2021.02.01
[TestDome] HTML/CSS and JavaScript: Semantics (HTML5, CSS3)  (0) 2021.01.31

๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”