๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก์ ‘๊ทผ์„ฑ (4)

UI Code Lab

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋งŒ๋“œ๋Š” ์•Œ๋ฆผ(Toast) ์ปดํฌ๋„ŒํŠธ

๐Ÿ“Œ ๊ฐœ์š” Toast ์•Œ๋ฆผ์€ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋น ๋ฅด๊ณ  ๊ฐ„๋‹จํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜๋Š” UI ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด “์ €์žฅ๋˜์—ˆ์Šต๋‹ˆ๋‹ค”์ฒ˜๋Ÿผ ํ™”๋ฉด ์ƒ๋‹จ์ด๋‚˜ ํ•˜๋‹จ์— ์งง๊ฒŒ ๋‚˜ํƒ€๋‚˜๋Š” ์•Œ๋ฆผ ๋ง์ด์ฃ . ์ด ๊ธ€์—์„œ๋Š” ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Vanilla JS)๋งŒ์œผ๋กœ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ toast ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฒ•์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. โœ… ์ˆœ์ˆ˜ JS๋กœ ๊ฐ€๋ณ๊ฒŒ ๊ตฌํ˜„โœ… ์œ„์น˜, ์ง€์† ์‹œ๊ฐ„, ์• ๋‹ˆ๋ฉ”์ด์…˜ ์„ค์ • ๊ฐ€๋Šฅโœ… ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ์‚ฌ์šฉ์ž๋„ ๊ณ ๋ คํ•œ ์ ‘๊ทผ์„ฑ ๐Ÿ’ก Toast UI๋ž€?Toast๋Š” ํ™”๋ฉด ํ•œ์ชฝ์— ๋ช‡ ์ดˆ๊ฐ„ ํ‘œ์‹œ๋˜๋Š” ์ผ์‹œ์ ์ธ ๋ฉ”์‹œ์ง€์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๋ณ„๋„์˜ ์กฐ์ž‘ ์—†์ด ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์–ด UX ํ–ฅ์ƒ์— ํšจ๊ณผ์ ์ด์ฃ . ๐Ÿ“ˆ ์ž์ฃผ ์“ฐ์ด๋Š” ์ƒํ™ฉ ์˜ˆ์‹œํผ ์ œ์ถœ ํ›„ “์ œ์ถœ์ด ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค”๋ณต์‚ฌ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ “ํด๋ฆฝ๋ณด๋“œ์— ๋ณต์‚ฌ๋จ”์ €์žฅ, ์‚ญ์ œ, ์˜ค๋ฅ˜ ์•ˆ๋‚ด ๋“ฑ ๐Ÿ› ๏ธ HTML..

์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ ์‹ค์ „ ๋ชจ๋‹ฌ ๊ตฌํ˜„๊ธฐ (Modal)

๋ชจ๋‹ฌ์€ UI์—์„œ ์ž์ฃผ ์“ฐ์ด๋Š” ์ปดํฌ๋„ŒํŠธ์ง€๋งŒ, ์ ‘๊ทผ์„ฑ๊นŒ์ง€ ์ฑ™๊ธด ๊ตฌํ˜„์€ ์ƒ๊ฐ๋ณด๋‹ค ๋“œ๋ญ…๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๊ธฐ๋ณธ์ ์ธ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋‹ฌ ๊ตฌํ˜„๋ฒ•๋ถ€ํ„ฐ, ์Šคํฌ๋ฆฐ๋ฆฌ๋”์™€ ํ‚ค๋ณด๋“œ ์‚ฌ์šฉ์ž๋„ ๊ณ ๋ คํ•œ ์ ‘๊ทผ์„ฑ ๊ฐœ์„  ํฌ์ธํŠธ๊นŒ์ง€ ๋‹ค๋ค„๋ด…๋‹ˆ๋‹ค. ์‹ค๋ฌด์— ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์˜ˆ์ œ ์ฝ”๋“œ๋„ ํ•จ๊ป˜ ์ œ๊ณตํ•˜๋‹ˆ, ๋ณต์žกํ•œ ํ”„๋ ˆ์ž„์›Œํฌ ์—†์ด ์ˆœ์ˆ˜ JS๋กœ๋„ ์ถฉ๋ถ„ํžˆ ๋ฉ‹์ง„ ์ ‘๊ทผ์„ฑ ๋ชจ๋‹ฌ์„ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”! โœจ ๊ธฐ๋ณธ ๋ชจ๋‹ฌ ๊ตฌํ˜„๊ฐ„๋‹จํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ๋ชจ๋‹ฌ์„ ๋„์šฐ๊ณ  ๋‹ซ๋Š” ๊ธฐ๋ณธ ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. โœ… HTML ๊ตฌ์กฐ ๋ชจ๋‹ฌ ์—ด๊ธฐ ๋ชจ๋‹ฌ ์ œ๋ชฉ ๋ชจ๋‹ฌ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๋‹ซ๊ธฐ โœ… JS ๊ธฐ๋ณธ ๋กœ์ง const openBtn = document.getElementById('openModal');const closeBtn = document.getElementB..

๋ฐ˜์‘ํ˜• ์›น์„ ์œ„ํ•œ table ๊ตฌ์กฐ ๊ฐœ์„  – ul, li๋กœ ๋ฐ”๊พธ๊ณ  ์ ‘๊ทผ์„ฑ๊นŒ์ง€ ์ฑ™๊ธฐ๊ธฐ

์›น์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ(table) ํ˜•ํƒœ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๊ฑด ํ”ํ•œ ์ผ์ด์ง€๋งŒ, ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ๋Š” ํ‘œ๊ฐ€ ์ž˜๋ ค ๋ณด์ด๊ฑฐ๋‚˜ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿด ๋•Œ ์œ ์šฉํ•œ ๋ฐฉ๋ฒ•์ด ๋ฐ”๋กœ table์„ ul, li ๊ตฌ์กฐ๋กœ ๋ฐ”๊ฟ” ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ์‹ค์ œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด table์„ ul/li๋กœ ๋ฐ”๊พธ๋Š” ๋ฐฉ๋ฒ•๊ณผ, ์ ‘๊ทผ์„ฑ(Accessibility)๊นŒ์ง€ ๊ณ ๋ คํ•œ ๋งˆํฌ์—… ์ „๋žต์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. โœ… ์™œ table ๋Œ€์‹  ul, li๋ฅผ ์‚ฌ์šฉํ• ๊นŒ? ํ•ญ๋ชฉtableul, li๋ฐ˜์‘ํ˜• ๊ตฌํ˜„์–ด๋ ค์›€์œ ์—ฐํ•จ์Šคํƒ€์ผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์ œํ•œ์ ์ž์œ ๋กœ์›€์ ‘๊ทผ์„ฑ๋ช…ํ™•ํ•œ ๊ตฌ์กฐ ์ œ๊ณต์ถ”๊ฐ€ ์†์„ฑ ํ•„์š”๋ชจ๋ฐ”์ผ ๊ฐ€๋…์„ฑ๋‚ฎ์Œ๋†’์Œtable์€ ์˜๋ฏธ๋ก ์ ์œผ๋กœ๋Š” ์ข‹์ง€๋งŒ, ์ž‘์€ ํ™”๋ฉด์—์„œ ์Šคํฌ๋กค ์—†์ด ๋ณด๊ธฐ ์–ด๋ ต๊ณ  ์Šคํƒ€์ผ๋ง๋„ ์ œํ•œ์ ์ž…๋‹ˆ๋‹ค. ul, li ๊ตฌ์กฐ๋Š” ๋” ์œ ์—ฐํ•˜๊ฒŒ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•  ..

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํƒญ ๊ธฐ๋Šฅ ๋งŒ๋“ค๊ธฐ (tab)

๐Ÿงญ ์›น UI๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ๋ณธ๊ธฐ – ํƒญ ๊ธฐ๋Šฅ๋ถ€ํ„ฐ ํƒ„ํƒ„ํ•˜๊ฒŒ์›น์‚ฌ์ดํŠธ๋ฅผ ์ฒ˜์Œ ๋ฐฉ๋ฌธํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ€์žฅ ๋จผ์ € ์ ‘ํ•˜๋Š” UI ์š”์†Œ ์ค‘ ํ•˜๋‚˜๊ฐ€ ํƒญ ๋ฉ”๋‰ด์ž…๋‹ˆ๋‹ค. ์ •๋ณด๊ฐ€ ๋งŽ์„์ˆ˜๋ก ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณต์žกํ•˜๊ฒŒ ๋А๊ปด์ง€๊ธฐ ์‰ฌ์šด๋ฐ, ํƒญ์€ ์ด๋Ÿฐ ๋‚ด์šฉ์„ ์ฃผ์ œ๋ณ„๋กœ ๋‚˜๋ˆ  ๊ฐ€๋…์„ฑ๊ณผ ๊ฒฝํ—˜์„ ๋™์‹œ์— ์žก์„ ์ˆ˜ ์žˆ๋Š” ํ›Œ๋ฅญํ•œ ๋„๊ตฌ์˜ˆ์š”. ์˜ค๋Š˜์€ ์ˆœ์ˆ˜ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํƒญ ๊ธฐ๋Šฅ์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•๊ณผ ํ•จ๊ป˜ ์ ‘๊ทผ์„ฑ(Accessibility)๊นŒ์ง€ ์ฑ™๊ธฐ๋Š” ํŒ์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ๐ŸŽฏ ํƒญ UI๋ž€?ํƒญ ๋ฉ”๋‰ด๋Š” ์—ฌ๋Ÿฌ ์ •๋ณด ๋ธ”๋ก์„ ๊ฒน์ณ๋‘๊ณ , ์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญํ•˜๋Š” ํƒญ์— ๋”ฐ๋ผ ํ•ด๋‹น ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. FAQ, ์ œํ’ˆ ์‚ฌ์–‘, ๋ฉค๋ฒ„ ํ”„๋กœํ•„, ์นดํ…Œ๊ณ ๋ฆฌ ๊ตฌ๋ถ„ ๋“ฑ ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์— ํ™œ์šฉ๋˜์ฃ . ๐Ÿงฑ HTML ๊ตฌ์กฐ๋ถ€ํ„ฐ ์ค€๋น„ํ•˜๊ธฐ๋จผ์ € ํƒญ ๋ฒ„ํŠผ๊ณผ ์ฝ˜ํ…์ธ  ์˜์—ญ์„ HTML๋กœ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค. ํƒญ 1..