| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 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 |
- ์๋ฐ์คํฌ๋ฆฝํธ
- ์๋ฐ์คํฌ๋ฆฝํธ์ปดํฌ๋ํธ
- ๋คํฌ๋ชจ๋ํ ๊ธ
- ์ฝ๋ฉ์์
- JavaScript
- ์๋ฐ์คํฌ๋ฆฝํธui
- ๋คํฌ๋ชจ๋
- ์น๊ฐ๋ฐ
- ์นUI
- ui์ปดํฌ๋ํธ
- uiux๋์์ธ
- ๋ฐ๋๋ผjs
- UIUX
- js์คํฌ๋กค์ด๋ฒคํธ
- UX๋์์ธ
- ๋ก์ปฌ์คํ ๋ฆฌ์ง
- ์นui๋์์ธ
- ์คํฌ๋ฆฐ๋ฆฌ๋์ง์
- css์ ๋๋ฉ์ด์
- css๋ณ์
- ์น๋์์ธ
- ์น์ ๊ทผ์ฑ
- ์คํฌ๋กค์ ๋๋ฉ์ด์
- ๋ฐ์ํ์น
- ๋ฐ๋๋ผ์คํฌ๋ฆฝํธ
- ์ธํฐ๋ ํฐ๋ธui
- ์ ๊ทผ์ฑ
- preferscolorscheme
- ํ๋ก ํธ์๋
- ํ ๋ง์๋์ ํ
- Today
- Total
๋ชฉ๋กscrollui (1)
UI Code Lab
๐งฒ ์คํฌ๋กค ์์น์ ๋ฐ๋ผ ๊ณ ์ ๋๋ UI ๋ง๋ค๊ธฐ – Sticky ์์ ๊ตฌํ ์์ ์ ๋ณต
์คํฌ๋กค์ ๋ด๋ฆฌ๋ฉด ๋ฉ๋ด๋ ํค๋๊ฐ ํ๋ฉด ์๋จ์ ๊ณ ์ ๋์ด ๊ณ์ ๋ณด์ด๋ ๊ฒฝํ, ๋ค๋ค ํ ๋ฒ์ฏค ํด๋ณด์ จ์ฃ ? ์ด๋ฐ ๊ธฐ๋ฅ์ ์ฌ์ฉ์ ํ์ ํจ์จ์ ๋์ด๊ณ , ์ํธ์์ฉ ์์์ ์ง์ค๋๋ฅผ ๋์ฌ์ฃผ๋ UI ๊ธฐ๋ฒ ์ค ํ๋์์. ์ด๋ฒ ๊ธ์์๋ position: sticky ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ์คํฌ๋กค ์์น์ ๋ฐ๋ผ ๊ณ ์ ๋๋ ์์(Sticky UI) ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์๊ฐํฉ๋๋ค. ๐ฏ ๊ตฌํ ๋ชฉํํน์ ์์ญ์์ ์คํฌ๋กค ์ ์์ ๊ณ ์ ์์ CSS ๋๋ JS๋ก ๊ตฌํ๋ฐ์ํ ์น์์๋ ์ ์ฐํ๊ฒ ์๋ โ๏ธ ๊ธฐ๋ณธ CSS ๋ฐฉ์ – position: sticky ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ์์ CSS์ position: sticky ์์ฑ์ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค. .sticky { position: sticky; top: 0; /* ํ๋ฉด ์์์ ์ผ๋ง๋ ๋จ์ด์ง ์์น์ ๊ณ ์ ..