์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- ui์ปดํฌ๋ํธ
- js์คํฌ๋กค์ด๋ฒคํธ
- ์ฝ๋ฉ์์
- ์๋ฐ์คํฌ๋ฆฝํธui
- ์คํฌ๋กค์ ๋๋ฉ์ด์
- css์ ๋๋ฉ์ด์
- ์คํฌ๋ฆฐ๋ฆฌ๋์ง์
- ๋ฐ๋๋ผ์คํฌ๋ฆฝํธ
- ์น๊ฐ๋ฐ
- ๋ก์ปฌ์คํ ๋ฆฌ์ง
- UIUX
- ๋ฐ๋๋ผjs
- JavaScript
- ๋ฐ์ํ์น
- ํ๋ก ํธ์๋
- ์นUI
- ๋คํฌ๋ชจ๋ํ ๊ธ
- ์น๋์์ธ
- ๋คํฌ๋ชจ๋
- ์ ๊ทผ์ฑ
- ์๋ฐ์คํฌ๋ฆฝํธ
- ์๋ฐ์คํฌ๋ฆฝํธ์ปดํฌ๋ํธ
- ์น์ ๊ทผ์ฑ
- preferscolorscheme
- UX๋์์ธ
- uiux๋์์ธ
- ์นui๋์์ธ
- css๋ณ์
- ํ ๋ง์๋์ ํ
- ์ธํฐ๋ ํฐ๋ธui
- Today
- Total
๋ชฉ๋ก์ ๊ทผ์ฑ (4)
UI Code Lab

๐ ๊ฐ์ Toast ์๋ฆผ์ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ณ ๊ฐ๋จํ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋ UI ์์์ ๋๋ค. ์๋ฅผ ๋ค์ด “์ ์ฅ๋์์ต๋๋ค”์ฒ๋ผ ํ๋ฉด ์๋จ์ด๋ ํ๋จ์ ์งง๊ฒ ๋ํ๋๋ ์๋ฆผ ๋ง์ด์ฃ . ์ด ๊ธ์์๋ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ(Vanilla JS)๋ง์ผ๋ก ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ toast ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๋ฒ์ ์๊ฐํฉ๋๋ค. โ ์์ JS๋ก ๊ฐ๋ณ๊ฒ ๊ตฌํโ ์์น, ์ง์ ์๊ฐ, ์ ๋๋ฉ์ด์ ์ค์ ๊ฐ๋ฅโ ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์๋ ๊ณ ๋ คํ ์ ๊ทผ์ฑ ๐ก Toast UI๋?Toast๋ ํ๋ฉด ํ์ชฝ์ ๋ช ์ด๊ฐ ํ์๋๋ ์ผ์์ ์ธ ๋ฉ์์ง์ ๋๋ค. ์ฌ์ฉ์๊ฐ ๋ณ๋์ ์กฐ์ ์์ด ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์์ด UX ํฅ์์ ํจ๊ณผ์ ์ด์ฃ . ๐ ์์ฃผ ์ฐ์ด๋ ์ํฉ ์์ํผ ์ ์ถ ํ “์ ์ถ์ด ์๋ฃ๋์์ต๋๋ค”๋ณต์ฌ ๋ฒํผ ํด๋ฆญ ์ “ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ๋จ”์ ์ฅ, ์ญ์ , ์ค๋ฅ ์๋ด ๋ฑ ๐ ๏ธ HTML..

๋ชจ๋ฌ์ UI์์ ์์ฃผ ์ฐ์ด๋ ์ปดํฌ๋ํธ์ง๋ง, ์ ๊ทผ์ฑ๊น์ง ์ฑ๊ธด ๊ตฌํ์ ์๊ฐ๋ณด๋ค ๋๋ญ ๋๋ค. ์ด ๊ธ์์๋ ๊ธฐ๋ณธ์ ์ธ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ฌ ๊ตฌํ๋ฒ๋ถํฐ, ์คํฌ๋ฆฐ๋ฆฌ๋์ ํค๋ณด๋ ์ฌ์ฉ์๋ ๊ณ ๋ คํ ์ ๊ทผ์ฑ ๊ฐ์ ํฌ์ธํธ๊น์ง ๋ค๋ค๋ด ๋๋ค. ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ์์ ์ฝ๋๋ ํจ๊ป ์ ๊ณตํ๋, ๋ณต์กํ ํ๋ ์์ํฌ ์์ด ์์ JS๋ก๋ ์ถฉ๋ถํ ๋ฉ์ง ์ ๊ทผ์ฑ ๋ชจ๋ฌ์ ๋ง๋ค์ด๋ณด์ธ์! โจ ๊ธฐ๋ณธ ๋ชจ๋ฌ ๊ตฌํ๊ฐ๋จํ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฒํผ ํด๋ฆญ ์ ๋ชจ๋ฌ์ ๋์ฐ๊ณ ๋ซ๋ ๊ธฐ๋ณธ ๊ตฌ์กฐ์ ๋๋ค. โ HTML ๊ตฌ์กฐ ๋ชจ๋ฌ ์ด๊ธฐ ๋ชจ๋ฌ ์ ๋ชฉ ๋ชจ๋ฌ ๋ด์ฉ์ ๋๋ค. ๋ซ๊ธฐ โ JS ๊ธฐ๋ณธ ๋ก์ง const openBtn = document.getElementById('openModal');const closeBtn = document.getElementB..

์น์์ ๋ฐ์ดํฐ๋ฅผ ํ(table) ํํ๋ก ๋ณด์ฌ์ฃผ๋ ๊ฑด ํํ ์ผ์ด์ง๋ง, ๋ชจ๋ฐ์ผ ํ๊ฒฝ์์๋ ํ๊ฐ ์๋ ค ๋ณด์ด๊ฑฐ๋ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ด๋ด ๋ ์ ์ฉํ ๋ฐฉ๋ฒ์ด ๋ฐ๋ก table์ ul, li ๊ตฌ์กฐ๋ก ๋ฐ๊ฟ ๋ฐ์ํ์ผ๋ก ๊ตฌํํ๋ ๊ฒ์ ๋๋ค. ์ด๋ฒ ๊ธ์์๋ ์ค์ ์์ ๋ฅผ ํตํด table์ ul/li๋ก ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ๊ณผ, ์ ๊ทผ์ฑ(Accessibility)๊น์ง ๊ณ ๋ คํ ๋งํฌ์ ์ ๋ต์ ์๊ฐํฉ๋๋ค. โ ์ table ๋์ ul, li๋ฅผ ์ฌ์ฉํ ๊น? ํญ๋ชฉtableul, li๋ฐ์ํ ๊ตฌํ์ด๋ ค์์ ์ฐํจ์คํ์ผ ์ปค์คํฐ๋ง์ด์ง์ ํ์ ์์ ๋ก์์ ๊ทผ์ฑ๋ช ํํ ๊ตฌ์กฐ ์ ๊ณต์ถ๊ฐ ์์ฑ ํ์๋ชจ๋ฐ์ผ ๊ฐ๋ ์ฑ๋ฎ์๋์table์ ์๋ฏธ๋ก ์ ์ผ๋ก๋ ์ข์ง๋ง, ์์ ํ๋ฉด์์ ์คํฌ๋กค ์์ด ๋ณด๊ธฐ ์ด๋ ต๊ณ ์คํ์ผ๋ง๋ ์ ํ์ ์ ๋๋ค. ul, li ๊ตฌ์กฐ๋ ๋ ์ ์ฐํ๊ฒ ๋ ์ด์์์ ๊ตฌ์ฑํ ..

๐งญ ์น UI๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ๋ณธ๊ธฐ – ํญ ๊ธฐ๋ฅ๋ถํฐ ํํํ๊ฒ์น์ฌ์ดํธ๋ฅผ ์ฒ์ ๋ฐฉ๋ฌธํ ์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ๋จผ์ ์ ํ๋ UI ์์ ์ค ํ๋๊ฐ ํญ ๋ฉ๋ด์ ๋๋ค. ์ ๋ณด๊ฐ ๋ง์์๋ก ์ฌ์ฉ์์๊ฒ ๋ณต์กํ๊ฒ ๋๊ปด์ง๊ธฐ ์ฌ์ด๋ฐ, ํญ์ ์ด๋ฐ ๋ด์ฉ์ ์ฃผ์ ๋ณ๋ก ๋๋ ๊ฐ๋ ์ฑ๊ณผ ๊ฒฝํ์ ๋์์ ์ก์ ์ ์๋ ํ๋ฅญํ ๋๊ตฌ์์. ์ค๋์ ์์ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํญ ๊ธฐ๋ฅ์ ๋ง๋๋ ๋ฐฉ๋ฒ๊ณผ ํจ๊ป ์ ๊ทผ์ฑ(Accessibility)๊น์ง ์ฑ๊ธฐ๋ ํ์ ์๊ฐํฉ๋๋ค. ๐ฏ ํญ UI๋?ํญ ๋ฉ๋ด๋ ์ฌ๋ฌ ์ ๋ณด ๋ธ๋ก์ ๊ฒน์ณ๋๊ณ , ์ฌ์ฉ์๊ฐ ํด๋ฆญํ๋ ํญ์ ๋ฐ๋ผ ํด๋น ์ฝํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ตฌ์กฐ์ ๋๋ค. FAQ, ์ ํ ์ฌ์, ๋ฉค๋ฒ ํ๋กํ, ์นดํ ๊ณ ๋ฆฌ ๊ตฌ๋ถ ๋ฑ ๋ค์ํ ์ํฉ์ ํ์ฉ๋์ฃ . ๐งฑ HTML ๊ตฌ์กฐ๋ถํฐ ์ค๋นํ๊ธฐ๋จผ์ ํญ ๋ฒํผ๊ณผ ์ฝํ ์ธ ์์ญ์ HTML๋ก ๊ตฌ์ฑํฉ๋๋ค. ํญ 1..