FrontEnd/css

css๋กœ ๋งŒ๋“œ๋Š” ์ฒดํฌ๋ฐ•์Šค ON/OFF ์Šค์œ„์น˜ ๋ฒ„ํŠผ ๋””์ž์ธ ์˜ˆ์ œ(๋ผ์ดํŠธ๋ชจ๋“œ/๋‹คํฌ๋ชจ๋“œ)

FrontEnd ๊น€ํ‰๋ฒ”๋‹˜ 2021. 3. 4. 21:50
๋ฐ˜์‘ํ˜•

๐Ÿฃ ๋“ค์–ด๊ฐ€๊ธฐ ์ „

์š”์ฆ˜ UI์ƒ์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง๊ด€์ ์ธ ํ˜•ํƒœ๋กœ ON/OFF ์Šค์œ„์น˜ ๋ฒ„ํŠผ์„ ์ œ๊ณตํ•œ๋‹ค.

์ด๋Ÿฌํ•œ ํ˜•ํƒœ๋Š” HTML input Checkbox๋ฅผ ์ด์šฉํ•˜์—ฌ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

๋‹คํฌ ๋ชจ๋“œ/๋ผ์ดํŠธ ๋ชจ๋“œ ๋ณ€ํ™˜์ด๋ผ๋˜์ง€

ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๋„๊ณ  ํ‚ค๋Š” ๊ฒฝ์šฐ๋Š” ๊ธฐ๋ณธ์ ์ธ ์ฒดํฌ๋ฐ•์Šค ๋””์ž์ธ๋ณด๋‹ค๋Š”

์Šค์œ„์น˜ ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฒŒ ์‚ฌ์šฉ์ž์˜ ์ดํ•ด๋„๊ฐ€ ๋” ๋†’์„ ์ˆ˜ ์žˆ๋‹ค.

 

ON/OFF ์Šค์œ„์น˜ ์™„์„ฑ UI

๋ณดํ†ต ON ์ƒํƒœ์ผ ๊ฒฝ์šฐ ํฌ์ธํŠธ ์ปฌ๋Ÿฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ƒํƒœ๊ฐ€ ๋“ค์–ด์˜จ ์ƒํƒœ์ด๋ฉฐ,

OFF์ƒํƒœ์ผ ๊ฒฝ์šฐ ํšŒ์ƒ‰ ๋“ฑ์„ ์ด์šฉํ•˜์—ฌ ๊บผ์ ธ์žˆ๋Š” ๋Š๋‚Œ์œผ๋กœ ๋งŒ๋“  ์Šค์œ„์น˜ ๋””์ž์ธ์ด๋‹ค.

 

ON/OFF ์Šค์œ„์น˜ UI

HTML ์ฝ”๋“œ

<label class="switch-button">
	<input type="checkbox"/>
    <span class="onoff-switch"></span>
</label>

CSS ์ฝ”๋“œ

.switch-button {
        position: relative;
        display: inline-block;
        width: 55px;
        height: 30px;
    }

    .switch-button input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .onoff-switch {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius:20px;
        background-color: #ccc;
        box-shadow: inset 1px 5px 1px #999;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .onoff-switch:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: #fff;
        -webkit-transition: .5s;
        transition: .4s;
        border-radius:20px;
    }

    .switch-button input:checked + .onoff-switch {
        background-color: #F2D522;
        box-shadow: inset 1px 5px 1px #E3AE56;
    }

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

 

๋‹คํฌ ๋ชจ๋“œ/๋ผ์ดํŠธ ๋ชจ๋“œ ์Šค์œ„์น˜

2021๋…„ ํŠธ๋ Œ๋“œ ์ค‘ ํ•˜๋‚˜์ธ ๋‹คํฌ ๋ชจ๋“œ ํ…Œ๋งˆ๋Š” ์ด์ œ ๋ชจ๋ฐ”์ผ๋ฟ ์•„๋‹ˆ๋ผ ์›น์—์„œ๋„ ์ž์ฃผ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

์ด ๋˜ํ•œ ์œ„์™€ ๊ฐ™์€ ์ฒดํฌ๋ฐ•์Šค ์Šค์œ„์น˜ ๋ฒ„ํŠผ์œผ๋กœ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

์š”์ฆ˜ ๋„ˆ๋ฌด ์˜ˆ์œ ๋‹คํฌ ๋ชจ๋“œ ๋ฒ„ํŠผ๋“ค์ด ์žˆ์œผ๋‹ˆ 

ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ์•ฝ๊ฐ„ ์ˆ˜์ •ํ•ด์„œ ๋งŒ๋“ค์–ด ๋ณด๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค.

 

์ตœ๊ทผ github ๋‹คํฌ ๋ชจ๋“œ๊ฐ€ ๋„์ž…๋˜๋ฉด์„œ 

๋‹คํฌ ๋ชจ๋“œ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋„ˆ๋ฌด ๊ท€์—ฝ๊ฒŒ ๋˜๋Š” ๊ฑธ ๋ณด๋ฉฐ, ๊ทธ ์ •๋„๋Š” ์•„๋‹ˆ์ง€๋งŒ 

๊ฐ„๋‹จํ•œ ๋‹คํฌ ๋ชจ๋“œ ์Šค์œ„์น˜ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์—ˆ๋‹ค.

 

๋‹คํฌ ๋ชจ๋“œ/๋ผ์ดํŠธ ๋ชจ๋“œ ์Šค์œ„์น˜ ์™„์„ฑ UI

์•„๊นŒ ์ฝ”๋“œ์™€ ๋น„์Šทํ•˜์ง€๋งŒ, ๋ฒ„ํŠผ์— ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด ์ข€  ๋” ๋‹ค๋ฅธ ๋Š๋‚Œ์ด ๋‚œ๋‹ค.

๋‹คํฌ๋ชจ๋“œ ๋ผ์ดํŠธ๋ชจ๋“œ ์Šค์œ„์น˜ ๋ฒ„ํŠผ 

HTML ์ฝ”๋“œ

<label class="dark-mode-button">
	<input type="checkbox"/>
	<span class="onoff-switch"></span>
</label>

 

CSS ์ฝ”๋“œ

.dark-mode-button {
        position: relative;
        display: block;
        width: 45px;
        height: 30px;
    }

    .dark-mode-button input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .dark-mode-button .onoff-switch {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 12px;
        background-color: #fff;
        box-shadow: 1px 1px 3px #eaeaea, -1px -1px 3px #eaeaea;
        border-radius: 20px;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .dark-mode-button .onoff-switch:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        top: -5px;
        background-image: url("sun.png");
        background-size: 15px;
        background-position: center;
        background-color: #fff;
        background-repeat: no-repeat;
        -webkit-transition: .5s;
        transition: .4s;
        border-radius: 20px;
        box-shadow: 1px 1px 3px #eaeaea;

    }

    .dark-mode-button input:checked + .onoff-switch {
        background-color: #444;
        box-shadow: inset 1px 1px 2px #222;
    }

    .dark-mode-button input:checked + .onoff-switch:before {
        background-image: url("moon.png");
        background-color: #333;
        box-shadow: none;
        -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
        transform: translateX(16px);
    }

 

๐Ÿ˜ถ ๋งˆ์น˜๋ฉด์„œ

์ด๋Ÿฌํ•œ ์Šค์œ„์น˜ ๋ฒ„ํŠผ์„ ๊ตฌํ˜„ํ•  ๊ฒฝ์šฐ 2๊ฐ€์ง€์˜ ์„ ํƒ์ด ์žˆ์„ ๋•Œ

์‚ฌ์šฉ์ž๊ฐ€ ์ข€ ๋” ์ง๊ด€์ ์ด๊ฒŒ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋“ค์–ด๊ฐˆ ๊ฒฝ์šฐ ์ข€ ๋” ์ง๊ด€์ ์œผ๋กœ ํ™•์ธ์ด ๋˜๋ฉฐ, ์ด๋Ÿฌํ•œ ํ˜•ํƒœ์˜ UI๊ฐ€ 

ํ•ธ๋“œํฐ์—์„œ๋„ ์ž์ฃผ ์‚ฌ์šฉ๋ผ์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์นœ๊ทผํ•˜๋‹ค๋Š” ์žฅ์ ๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

 

 

 

 

์‚ฌ์šฉํ•œ ์•„์ด์ฝ˜ ์ถœ์ฒ˜

www.flaticon.com/freeicon/moon_740860term=moon&page=1&position=33&page=1&position=33&related_id=740860&origin=search

www.flaticon.com/freeicon/sun_2698194term=sun&page=1&position=18&page=1&position=18&related_id=2698194&origin=search

๋ฐ˜์‘ํ˜•