๋‘ฅ๊ทผ ํ† ๊ธ€ ๋ฒ„ํŠผ

๋ณธ ํฌ์ŠคํŒ…์—์„œ๋Š” html, css, javascript๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‘ฅ๊ทผ toggle๋ฒ„ํŠผ์„ ๋งŒ๋“ค๊ณ , ๋ฒ„ํŠผ์˜ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์ƒํƒœ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ๊ธฐ๋Šฅ๊นŒ์ง€ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค. ๋ณธ ๋ณด์ŠคํŒ…์— ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ๋ณธ์ฝ”๋“œ๋Š” w3schools์—์„œ ๊ฐ€์ง€๊ณ  ์˜จ ๊ฒƒ์ž…๋‹ˆ๋‹ค. w3schools์—์„œ๋Š” ๋‹จ์ˆœํžˆ css๋ฅผ ์ด์šฉํ•ด์„œ ํ† ๊ธ€๋ฒ„ํŠผ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ๊ฒƒ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ ๊นŒ์ง€๋งŒ ๋ณด์—ฌ์ฃผ์—ˆ๋Š”๋ฐ, ์ €๋Š” ๊ทธ๋ ‡๊ฒŒ ํ† ๊ธ€์ด ๋  ๋•Œ๋งˆ๋‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์–ด๋–ค ๊ธฐ๋Šฅ์ด ์‹คํ–‰๋˜๋Š” ๋ถ€๋ถ„๊นŒ์ง€ ํ™•์žฅํ•ด์„œ ํฌ์ŠคํŒ…ํ•ฉ๋‹ˆ๋‹ค.

 

์šฐ์„  toggle.html ํŒŒ์ผ์— input tag๋ฅผ ์ด์šฉํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ด์ค๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <label class="switch">
        <input type="checkbox" />
        <span class="slider round"></span>
    </label>
</body>

</html>

 

๊ทธ๋ฆฌ๊ณ  toggle.css ํŒŒ์ผ์„ ํ•˜๋‚˜ ๋งŒ๋“ค์–ด์„œ ๊ทธ ์•ˆ์— ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑ์„ ํ•ด์ค๋‹ˆ๋‹ค.

/* ์Šฌ๋ผ์ด๋” ์™ธ๋ถ€๋ฅผ ๊ฐ์‹ธ๋Š” ๋ผ๋ฒจ์— ๋Œ€ํ•œ ์Šคํƒ€์ผ */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* HTML ๊ธฐ๋ณธ ์ฒดํฌ๋ฐ•์Šค ์ˆจ๊ธฐ๊ธฐ */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* ์Šฌ๋ผ์ด๋” - ์‹ค์ œ๋กœ ํ† ๊ธ€๋  ๋ถ€๋ถ„ */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* ์Šฌ๋ผ์ด๋”๋ฅผ ๋™๊ทธ๋ž—๊ฒŒ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•œ ๋ถ€๋ถ„ */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

 

์ด์ œ HTML ํŒŒ์ผ์˜ <head></head> ๋ถ€๋ถ„์— ์œ„ css ํŒŒ์ผ์„ ๋งํฌ์‹œ์ผœ์ค๋‹ˆ๋‹ค.

<head>
	<link rel="stylesheet" type="text/css" href="toggle.css" />
</head>

 

์ด์ œ toggle.html ํŒŒ์ผ์„ ๋”๋ธ”ํด๋ฆญํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์—ด์–ด๋ณด๋ฉด ์•„๋ž˜ ์˜์ƒ์ฒ˜๋Ÿผ ์›€์ง์ด๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๋‘ฅ๊ทผ ํ† ๊ธ€ ๋ฒ„ํŠผ ์›€์ง์ด๋Š” ์˜์ƒ

 

์ž, ์ด์ œ ์—ฌ๊ธฐ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด๋ณด๋„๋ก ํ• ๊ฑด๋ฐ์š”,

์ด ํ† ๊ธ€๋ฒ„ํŠผ์€ input ํƒœ๊ทธ์˜ checkbox๋ฅผ ์ด์šฉํ•œ ๊ฒƒ์ด๋ฏ€๋กœ ํ† ๊ธ€์ด ๋  ๋•Œ๋งˆ๋‹ค checked ์†์„ฑ์ด ๋ณ€๊ฒฝ๋˜๋„๋ก ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ์„ ๊ธฐ์–ตํ•˜๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ† ๊ธ€๋ฒ„ํŠผ์˜ checked ์†์„ฑ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํŠน์ • ๋ฌธ์ž์—ด์„ ์ถœ๋ ฅํ•˜๋„๋ก ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์€ ๋”ฐ๋กœ ๋งŒ๋“ค์ง€ ์•Š๊ณ  ๊ทธ๋ƒฅ html ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•˜๋„๋ก ํ• ๊ฒŒ์š”.

์šฐ์„ , input ํƒœ๊ทธ์— onclick ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ toggle์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ํ•˜๊ณ , toggle ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜์ฒ˜๋Ÿผ input  ํƒœ๊ทธ์˜ onclick ์†์„ฑ์„ ๋„ฃ์–ด์ฃผ์„ธ์š”. 

<label class="switch">
    <input type="checkbox" onclick="toggle(this)">
    <span class="slider round"></span>
</label>

์ด๋ ‡๊ฒŒ ํ•ด์ฃผ๋ฉด ํ† ๊ธ€๋ฒ„ํŠผ(์ฒดํฌ๋ฐ•์Šค)๊ฐ€ ํด๋ฆญ๋  ๋•Œ๋งˆ๋‹ค toggle์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด์„œ ์ž๊ธฐ์ž์‹ ์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„˜๊ฒจ์ฃผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์ž, ์ด์ œ body ์•„๋ž˜์ชฝ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<script>
    function toggle(element) {
        console.log(element.checked);
    }
</script>

์œ„ ์ฝ”๋“œ๋Š” <head></head> ์— ์œ„์น˜ํ•ด๋„ ๋˜๊ณ  <body></body> ์‚ฌ์ด์— ์œ„์น˜ํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

๋‹น์—ฐํžˆ ๋ณ„๋„ ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ์ž‘์„ฑํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

๋ถ„๋ฆฌํ•˜์—ฌ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๊ณผ ๊ด€๋ จํ•ด์„œ๋Š” ์ œ๊ฐ€ ์ž‘์„ฑํ•œ ๋‹ค๋ฅธ ํฌ์ŠคํŠธ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. -> https://keichee.tistory.com/356

์ €๋Š” <body></body> ์‚ฌ์ด์— ๋„ฃ์–ด๋†“์•˜์Šต๋‹ˆ๋‹ค.

<body>
    <label class="switch">
        <input type="checkbox" onclick="toggle(this)">
        <span class="slider round"></span>
    </label>

    <script>
        function toggle(element) {
            console.log(element.checked);
        }
    </script>
</body>

 

์ž, ์—ฌ๊ธฐ๊นŒ์ง€ html ํŒŒ์ผ ์ „์ฒด ์ฝ”๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€ ๋‹ค์‹œ ํ•œ๋ฒˆ ๋ณด์—ฌ๋“œ๋ฆด๊ฒŒ์š”.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="toggle.css" />
</head>

<body>
    <label class="switch">
        <input type="checkbox" onclick="toggle(this)">
        <span class="slider round"></span>
    </label>

    <script>
        function toggle(element) {
            console.log(element.checked);
        }
    </script>
</body>

</html>

 

์—ฌ๊ธฐ๊นŒ์ง€ ์™„์„ฑํ•˜์—ฌ ์‹คํ–‰ํ•˜๋ฉด ์ฒดํฌ๋ฐ•์Šค(ํ† ๊ธ€๋ฒ„ํŠผ)์„ ํด๋ฆญํ•  ๋•Œ๋งˆ๋‹ค toggleํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋ฉด์„œ ํ˜„์žฌ ์ฒดํฌ๋ฐ•์Šค์˜ ์ƒํƒœ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ฐ”๋€Œ์—ˆ๋Š”์ง€๋ฅผ ์ถœ๋ ฅํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํ™•์ธ์„ ์œ„ํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์—์„œ toggle.html ํŒŒ์ผ์„ ์ƒˆ๋กœ๊ณ ์นจํ•˜์—ฌ ๋‹ค์‹œ ์—ด์–ด์ฃผ์‹œ๊ณ ,

ํ™”๋ฉด์—์„œ ์šฐํด๋ฆญ > ๊ฒ€์‚ฌ (inspect)๋ฅผ ์„ ํƒํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๋„๊ตฌ(developer tools)๋ฅผ ์—ด์–ด์„œ consoleํƒญ์„ ์—ด์–ด์ฃผ์„ธ์š”.

๊ทธ๋ฆฌ๊ณ  ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ๋•Œ๋งˆ๋‹ค ์–ด๋–ค ๊ฐ’์ด ์ถœ๋ ฅ์ด ๋˜๋Š”์ง€ ํ™•์ธํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

ํ† ๊ธ€ ๋ฒ„ํŠผ ๋™์ž‘ ์˜์ƒ

 

์ž, ์ด๋ ‡๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ํ† ๊ธ€๋ฒ„ํŠผ์˜ ์ƒํƒœ๊ฐ’์„ ์ถœ๋ ฅํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์–ด๋–ค๊ฐ€์š”? ๋ณ„๋กœ ์–ด๋ ต์ง€ ์•Š์ฃ ? css ์Šคํƒ€์ผ์„ ํ•ด์„ํ•˜๊ธฐ ํž˜๋“œ์‹ค ์ˆœ ์žˆ๊ฒ ์œผ๋‚˜, ์—ฌ๊ธฐ์„œ ๊ทธ๋Ÿฐ ๋ถ€๋ถ„์„ ์ž์„ธํ•˜๊ฒŒ ๋‹ค๋ฃจ์ง„ ์•Š๊ฒ ์Šต๋‹ˆ๋‹ค.

์ข€ ๋” ๋‚˜์•„๊ฐ€์„œ ํ† ๊ธ€๋ฒ„ํŠผ์˜ ์ƒํƒœ๊ฐ’์— ๋”ฐ๋ผ ajax ์š”์ฒญ์„ ์„œ๋ฒ„์— ๋‚ ๋ ค ์‹ค์ œ DB๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ฑฐ๋‚˜, 

๋˜๋Š” html์˜ ํŠน์ • element๋ฅผ hideํ•˜๊ฑฐ๋‚˜ showํ•˜๋Š” ๋“ฑ์˜ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”.

 

๊ทธ๋Ÿผ ์˜ค๋Š˜๋„ ์ฆ๊ฑฐ์šด ์ฝ”๋”ฉํ•˜์‹œ๊ธธ ๋ฐ”๋ž˜์š” ^-^

 

- ๊น๊นํ•œ ๊ฐœ๋ฐœ์ž -