| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 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
- ์ ๊ทผ์ฑ
- ๋ฐ๋๋ผ์คํฌ๋ฆฝํธ
- ๋คํฌ๋ชจ๋
- ์น์ ๊ทผ์ฑ
- ์นUI
- ๋ก์ปฌ์คํ ๋ฆฌ์ง
- css์ ๋๋ฉ์ด์
- JavaScript
- ์ธํฐ๋ ํฐ๋ธui
- uiux๋์์ธ
- ์คํฌ๋ฆฐ๋ฆฌ๋์ง์
- js์คํฌ๋กค์ด๋ฒคํธ
- ์นui๋์์ธ
- ๋ฐ์ํ์น
- ์ฝ๋ฉ์์
- ํ ๋ง์๋์ ํ
- UX๋์์ธ
- ์๋ฐ์คํฌ๋ฆฝํธ
- preferscolorscheme
- css๋ณ์
- ์๋ฐ์คํฌ๋ฆฝํธ์ปดํฌ๋ํธ
- UIUX
- ui์ปดํฌ๋ํธ
- ์น๊ฐ๋ฐ
- ์๋ฐ์คํฌ๋ฆฝํธui
- ์คํฌ๋กค์ ๋๋ฉ์ด์
- ํ๋ก ํธ์๋
- ์น๋์์ธ
- Today
- Total
๋ชฉ๋กCSSํธ๋ฆญ (1)
UI Code Lab
๐ ์คํฌ๋กค ํผ์ผํธ ๊ธฐ๋ฐ ํ๋ก๊ทธ๋ ์ค ๋ฐ ๋ง๋ค๊ธฐ – ๋ฐ๋๋ผ JS๋ก ๊ตฌํํ๋ ์ค์ UI
์น์ฌ์ดํธ๋ฅผ ์ฝ๋ค ๋ณด๋ฉด ์๋จ์ ์์ ๋ฐ๊ฐ ์ค๋ฅด๋ฅต ์ฐจ์ค๋ฅด๋ ๊ฑธ ๋ณธ ์ ์์ผ์ ๊ฐ์? ์ด๊ฑด ๋ฐ๋ก ์คํฌ๋กค ํผ์ผํธ ๊ธฐ๋ฐ ํ๋ก๊ทธ๋ ์ค ๋ฐ(progress bar)์ ๋๋ค. ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์ผ๋ง๋ ์ฝ์๋์ง ์ง๊ด์ ์ผ๋ก ๋ณด์ฌ์ฃผ๋ UI๋ก, ์ฌ์ฉ์ ๊ฒฝํ(UX)์ ๋์ด๋ ๋ฐ ํจ๊ณผ์ ์ด์์. ์ด๋ฒ ๊ธ์์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ๋ฐ๋๋ผ JavaScript๋ง์ผ๋ก ์ด ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์๊ฐํฉ๋๋ค. ๐ฏ ๊ตฌํ ๋ชฉํ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ ๋น์จ์ ๋ฐ๋ผ ์๋จ ๋ฐ์ ๋๋น๊ฐ ์ค์๊ฐ์ผ๋ก ๋ณํจHTML, CSS, JavaScript๋ง ์ฌ์ฉ๋ฐ์ํ ์น์์๋ ์์ฐ์ค๋ฝ๊ฒ ์๋ ๐งฉ HTML ๊ตฌ์กฐ progress-container: ์ ์ฒด ํ๋ก๊ทธ๋ ์ค ๋ฐ ์์ญprogress-bar: ์ค์ ๋๋น๊ฐ ๋ณํ๋ ๋ฐ ์์ ๐จ CSS ์คํ์ผ๋ง .progress-container..