๐ป Programming/Javascript
HTML checkbox๋ฅผ ์ด์ฉํ ํ ๊ธ ๋ฒํผ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ธฐ๋ฅ ๋ฃ๊ธฐ (์์ค์ฝ๋ํฌํจ)
๋ณธ ํฌ์คํ ์์๋ 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ํ๋ ๋ฑ์ ๊ธฐ๋ฅ์ ๋ง๋ค์ด ๋ณด์ธ์.
๊ทธ๋ผ ์ค๋๋ ์ฆ๊ฑฐ์ด ์ฝ๋ฉํ์๊ธธ ๋ฐ๋์ ^-^
- ๊น๊นํ ๊ฐ๋ฐ์ -