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

๋ชฉ๋ก๋ชจ๋‹ฌ์ฐฝ (1)

UI Code Lab

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

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