| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
- ๋ฐ๋๋ผ์คํฌ๋ฆฝํธ
- ๋ฐ๋๋ผjs
- preferscolorscheme
- ์๋ฐ์คํฌ๋ฆฝํธ
- ์นUI
- ์ธํฐ๋ ํฐ๋ธui
- ์น์ ๊ทผ์ฑ
- ํ ๋ง์๋์ ํ
- ์นui๋์์ธ
- ๋คํฌ๋ชจ๋
- css๋ณ์
- ๋ก์ปฌ์คํ ๋ฆฌ์ง
- ๋ฐ์ํ์น
- UIUX
- ui์ปดํฌ๋ํธ
- ์น๋์์ธ
- ํ๋ก ํธ์๋
- ์ ๊ทผ์ฑ
- ์คํฌ๋กค์ ๋๋ฉ์ด์
- ๋คํฌ๋ชจ๋ํ ๊ธ
- ์น๊ฐ๋ฐ
- UX๋์์ธ
- JavaScript
- ์คํฌ๋ฆฐ๋ฆฌ๋์ง์
- uiux๋์์ธ
- ์๋ฐ์คํฌ๋ฆฝํธui
- js์คํฌ๋กค์ด๋ฒคํธ
- css์ ๋๋ฉ์ด์
- ์๋ฐ์คํฌ๋ฆฝํธ์ปดํฌ๋ํธ
- ์ฝ๋ฉ์์
- Today
- Total
๋ชฉ๋ก์นํ ๋ง์ ํ (1)
UI Code Lab
๐ ๋คํฌ ๋ชจ๋ ํ ๊ธ ๊ธฐ๋ฅ ๋ง๋ค๊ธฐ – ๋ฐ๋๋ผ JS๋ก UX ํฅ์์ํค๊ธฐ
์์ฆ ์น์ฌ์ดํธ๋ฅผ ๋ณด๋ฉด ๋คํฌ ๋ชจ๋ ๊ธฐ๋ฅ์ด ๊ธฐ๋ณธ์ฒ๋ผ ํ์ฌ๋์ด ์์ฃ . ๋์ ํผ๋ก๋ฅผ ์ค์ด๊ณ , ์ฌ์ฉ์์ ํ๊ฒฝ์ ๋ง์ถฐ ํ ๋ง๋ฅผ ๋ฐ๊ฟ ์ ์๋ ๋คํฌ ๋ชจ๋ ํ ๊ธ ๊ธฐ๋ฅ์ UX๋ฅผ ๋์ด๋ ๋ฐ ๋งค์ฐ ํจ๊ณผ์ ์ ๋๋ค. ์ด๋ฒ ๊ธ์์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ๋ฐ๋๋ผ JavaScript์ CSS ๋ณ์๋ง์ผ๋ก ๋คํฌ ๋ชจ๋ ํ ๊ธ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์๊ฐํฉ๋๋ค. โ ๊ตฌํ ๋ชฉํ๋ฒํผ ํด๋ฆญ ์ ๋ผ์ดํธ ↔ ๋คํฌ ๋ชจ๋ ์ ํCSS ๋ณ์(--color, --bg)๋ฅผ ํ์ฉํ ํ ๋ง ์คํ์ผ๋งJavaScript๋ก data-theme ์์ฑ ์ ์ด๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ฌ์ฉ์ ํ ๋ง ์ ์ฅ ๐งฑ HTML ๊ตฌ์กฐ input[type="checkbox"]๋ก ํ ๊ธ ๊ธฐ๋ฅ ๊ตฌํlabel๊ณผ span.slider๋ก ์คํ์ผ๋ง ๐จ CSS ์คํ์ผ :root { --bg-color: #ffff..