๐ช Programming
[CS] ๋ฒ ์ง์ ๊ณก์ ์๋ฆฌ ์ดํดํ๊ธฐ feat. ์นด์คํ
์กฐ ์๊ณ ๋ฆฌ์ฆ
[CS] ๋ฒ ์ง์ ๊ณก์ ์๋ฆฌ ์ดํดํ๊ธฐ feat. ์นด์คํ ์กฐ ์๊ณ ๋ฆฌ์ฆ
2025.06.23CSS์์ ์ ๋๋ฉ์ด์
์ด๋ ์ ํ ํจ๊ณผ๋ฅผ ์ ์ดํ ๋ ํ์ด๋ฐ ํจ์(๊ฐ์๋ ๊ณก์ )๋ฅผ ์ฌ์ฉํ๋ค. ํ์ด๋ฐ ํจ์๋ ์ ๋๋ฉ์ด์
์ด ์ผ๋ง๋ ๋น ๋ฅด๊ฒ ๋๋ ๋๋ฆฌ๊ฒ ์์ํ๊ณ ๋๋๋์ง๋ฅผ ๊ฒฐ์ ํ๋ ์ํ์ ์ธ ํจ์๋ค. ์ฝ๊ฒ ๋งํด ์ ๋๋ฉ์ด์
์ ์๋ ๋ณํ๋ฅผ ์ ์ดํ๋ ์ญํ ์ ํ๋ค. Tailwind CSS๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ease-in, ease-out, ease-in-out ๋ฑ ๋ฏธ๋ฆฌ ์ ์๋์ด ์๋ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํด์ ๋ค์ํ ๊ฐ์๋ ๊ณก์ ์ ์ ์ฉํ ์ ์๋ค.Button A ์๋ฅผ ๋ค์ด ease๋ ๋ถ๋๋ฝ๊ฒ ์์ํด์ ๋ถ๋๋ฝ๊ฒ ๋๋๊ณ (์ผ๋ฐ์ ์ธ ๊ฐ์๋ ๊ณก์ ), ease-in์ ๋๋ฆฌ๊ฒ ์์ํด์ ๋น ๋ฅด๊ฒ ๋๋๋ ํจ๊ณผ๋ฅผ ์ค ๋ ์ฌ์ฉํ๋ค. ์ฌ์ค ease, ease-in, ease-out, ease-in-out ๋ฑ์ CSS์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ ํ์ด๋ฐ ํจ์..
[JS] async ํจ์๊ฐ await๋ฅผ ๋ง๋ฌ์ ๋ ๋์ ํ๋ฆ
[JS] async ํจ์๊ฐ await๋ฅผ ๋ง๋ฌ์ ๋ ๋์ ํ๋ฆ
2025.06.14TL;DRasync/await๋ ๋น๋๊ธฐ ์ฝ๋๋ฅผ ๋๊ธฐ ์ฝ๋์ฒ๋ผ ์์ฑํ ์ ์๋๋ก ํด์ฃผ๋ ๋ฌธ๋ฒ์ ์คํ(Syntax Sugar)์ด๋ค. ๋ด๋ถ์ ์ผ๋ก๋ async ํจ์ ์คํ์ ์ผ์ ์ค๋จํ๋ค๊ฐ ํ๋ก๋ฏธ์ค๊ฐ ์ฒ๋ฆฌ๋๋ฉด ๋ง์ดํฌ๋กํ์คํฌ ํ๋ฅผ ํตํด ๋ค์ ์ฌ๊ฐ ํ๋ ๋ฐฉ์์ผ๋ก ๋
ผ๋ธ๋กํน์ ์ ์งํ๋ค. async/await๋ ํจ์ ์คํ์ ์ค๋จ/์ฌ๊ฐํ ์ ์๋ ์ ๋๋ ์ดํฐ์ ํ๋ก๋ฏธ์ค๋ฅผ ํ์ฉํด์ ๊ตฌํ๋์ด ์์ผ๋ฉฐ, await ์ดํ์ ์ฝ๋๋ ์ฌ์ค์ .then() ๋ฉ์๋์ ์ฝ๋ฐฑ ํจ์๋ผ๊ณ ๋ณผ ์ ์๋ค.promise.then(() => { /* await ์ดํ์ ์ฝ๋ */ }) async/await ๋ด๋ถ ๋ฉ์ปค๋์ฆasync ํจ์๋ฅผ ํธ์ถํ๋ฉด await ํค์๋๋ฅผ ๋ง๋๊ธฐ ์ ๊น์ง ์ผ๋ฐ ํจ์์ฒ๋ผ ๋๊ธฐ์ ์ผ๋ก ์คํasync ํจ์ ์คํ ์ค await ํค์๋๋ฅผ ๋ง๋..
[CSS] grid-row ๋์ ๋ฐฉ์ ์ดํด๋ณด๊ธฐ
[CSS] grid-row ๋์ ๋ฐฉ์ ์ดํด๋ณด๊ธฐ
2025.06.03grid-row-start, grid-row-end ์์ฑ์ ๊ทธ๋ฆฌ๋ ์์ดํ
์ด ์ด๋ ํ ๋ผ์ธ๋ถํฐ ์์ํ์ฌ ์ด๋ ํ ๋ผ์ธ์์ ๋๋ ์ง ์ง์ ํ ๋ ์ฌ์ฉํ๋ค. ์ด ์์ฑ์ ๊ทธ๋ฆฌ๋ ์์ดํ
(๊ทธ๋ฆฌ๋ ์ปจํ
์ด๋์ ์ง๊ณ ์์ ์์) ์์ฒด์ ์ ์ฉํ๋ค. ์ฐธ๊ณ ๋ก ๊ทธ๋ฆฌ๋ ๋ผ์ธ์ ์ปจํ
์ด๋ ์์ ์ง์ ๋ถํฐ 1, 2, 3, … ์์ ๋ฒํธ๊ฐ ๋ถ์ฌ๋๊ณ , ์ปจํ
์ด๋ ๋ ์ง์ ๋ถํฐ๋ -1, -2, -3, … ์์ ๋ฒํธ๊ฐ ๋ถ์ฌ๋๋ค./* ๊ทธ๋ฆฌ๋ ์์ดํ
์ด 1~2๋ฒ ๋ผ์ธ ์ฐจ์ง(์ฒซ ๋ฒ์งธ ํ ํธ๋) */grid-row-start: 1; grid-row-end: 2; span์ ๊ทธ๋ฆฌ๋ ์์ดํ
์ด ์ฐจ์งํ ํธ๋์ ๊ฐ์๋ฅผ ์ง์ ํ ๋ ์ฌ์ฉํ๋ค. ์ฌ๊ธฐ์ ํธ๋(track)์ด๋ ๋ ๊ทธ๋ฆฌ๋ ๋ผ์ธ ์ฌ์ด์ ๊ณต๊ฐ์ ์๋ฏธํ๋ค. ๊ทธ๋ฆฌ๋ ์
1๊ฐ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋์ ํ ํธ๋๊ณผ, ํ๋์ ์ด..
[HTTP] ETag ์ํฐํฐ ํ๊ทธ ํค๋
[HTTP] ETag ์ํฐํฐ ํ๊ทธ ํค๋
2025.05.05TL;DRETag(์ํฐํฐ ํ๊ทธ; Entity Tag)๋ HTTP ์๋ต ํค๋ ์ค ํ๋๋ก, ์น ๋ฆฌ์์ค์ ํน์ ๋ฒ์ ์ ์๋ณํ๊ธฐ ์ํ ๊ณ ์ ํ ์๋ณ์๋ค. ํด๋ผ์ด์ธํธ๋ ETag๋ฅผ ์ด์ฉํด ๋ฆฌ์์ค ๋ณ๊ฒฝ ์ฌ๋ถ๋ฅผ ์๋ฒ์ ๊ฒ์ฆํ๊ณ , ๋ณ๊ฒฝ๋์ง ์์์ผ๋ฉด ์บ์ ๋ ์ฝํ
์ธ ๋ฅผ ์ฌ์ฌ์ฉํจ์ผ๋ก์จ ๋์ญํญ์ ์ ์ฝํ๊ณ ์ฑ๋ฅ์ ๊ฐ์ ํ ์ ์๋ค. ์๋ ๋ฐฉ์ํด๋ผ์ด์ธํธ๊ฐ ํน์ ๋ฆฌ์์ค๋ฅผ ์ฒ์ ์์ฒญํ๋ฉด, ์๋ฒ๋ ์๋ต ํค๋์ ETag ๊ฐ์ ํฌํจํ์ฌ ๋ฆฌ์์ค์ ํจ๊ป ์ ๋ฌํด๋ผ์ด์ธํธ๋ ์๋ต์ผ๋ก ๋ฐ์ ETag ๊ฐ ์ ์ฅ์ดํ ๋์ผํ ๋ฆฌ์์ค ์ฌ์์ฒญ ์ If-None-Match ์์ฒญ ํค๋์ ETag ๊ฐ์ ๋ด์์ ์๋ฒ๋ก ์ ์ก์๋ฒ๋ ์ ๋ฌ๋ฐ์ ETag ๊ฐ๊ณผ ํ์ฌ ๋ฆฌ์์ค์ ETag ๊ฐ ๋น๊ต๊ฐ์ด ์ผ์นํ๋ฉด ๋ณธ๋ฌธ(body)์ ์๋ตํ๊ณ 304 Not Modified ๋ฐํ๊ฐ์ด ์ผ์นํ์ง..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ 6์ค๋ก ์ด๋ฏธ์ง ๋น๊ต ์ฌ๋ผ์ด๋ ๋ง๋ค๊ธฐ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ 6์ค๋ก ์ด๋ฏธ์ง ๋น๊ต ์ฌ๋ผ์ด๋ ๋ง๋ค๊ธฐ
2025.04.17์ด๋ฏธ์ง ๋น๊ต ์ฌ๋ผ์ด๋๋ ํธ๋ค์ ์ข์ฐ๋ก ์์ง์ฌ์ ๋ ์ด๋ฏธ์ง๋ฅผ ๋น๊ตํ ์ ์๋ UI ํจํด์ผ๋ก ์ผํ๋ชฐ์ด๋ ์ ํ ์๊ฐ ํ์ด์ง ๋ฑ์์ ์์ฃผ ๋ณผ ์ ์๋ค. ์ด๋ฌํ ์ด๋ฏธ์ง ๋น๊ต ์ฌ๋ผ์ด๋๋ range ํ์
์ input ํ๊ทธ์ 6์ค ์ ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ง์ผ๋ก ๊ตฌํํ ์ ์๋ค. range ํ์
์ input์ ์ฌ๋ผ์ด๋๋ฐ๋ฅผ ์กฐ์ ํ์ฌ ๋ฒ์ ๋ด ์ซ์ ๊ฐ์ ์ ํํ ์ ์๋ ์
๋ ฅ ํ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ ์คํ์ผ์ด ์ ์ฉ๋์ด ์๋ค. ์ด ๊ธฐ๋ณธ ์คํ์ผ์ ๋ชจ๋ ์ ๊ฑฐํ๊ณ ์ด๋ฏธ์ง์ ๋๋น/๋์ด๋งํผ ํฌ๊ธฐ๋ฅผ ํ์ฅํ๋ฉด, ์ฌ๋ผ์ด๋ ์์ญ์ ํด๋ฆญ ํน์ ๋๋๊ทธํ ๋๋ง๋ค (์คํ์ผ์ ์ ๊ฑฐํด์ ํ๋ฉด์ ๋ณด์ด์ง ์๋) ํธ๋ค์ด ํด๋น ์์น๋ก ์ด๋ํด์ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ค. ๊ธฐ๋ณธ์ ์ธ ๊ตฌํ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.์ด๋ฏธ์ง 1, ์ด๋ฏธ์ง 2๋ฅผ ๊ฐ์ธ๋ ๋ง์คํฌ ์์, ran..
[HTTP] Cache-Control ํค๋
[HTTP] Cache-Control ํค๋
2025.03.31TL;DRCache-Control์ ๋ธ๋ผ์ฐ์ ์ ์ค๊ฐ ์๋ฒ(Proxy, CDN ๋ฑ)๊ฐ ์ด๋ค ๋ฐฉ์์ผ๋ก ์๋ต์ ์บ์ฑํ ์ง ์ง์ ํ๋ ํค๋๋ก, ์บ์ฑ ๊ฐ๋ฅ ์ฌ๋ถ(public, private, no-store), ์บ์ ์ ํจ ๊ธฐ๊ฐ(max-age), ์ฌ๊ฒ์ฆ ๋ฐฉ์(no-cache, must-revalidate) ๋ฑ์ ์ค์ ํ ์ ์๋ค. ์ ์ ์ธ ๋ฆฌ์์ค์ ๋ณํ์ง ์๋ ์ ์ ์ธ ๋ฆฌ์์ค๋ ์ฅ๊ธฐ๊ฐ ์บ์Cache-Control: public, max-age=31536000, immutable public: ๋ธ๋ผ์ฐ์ ์ ์ค๊ฐ ์๋ฒ(ํ๋ก์, CDN ๋ฑ) ๋ชจ๋ ์๋ต์ ์บ์ฑํ๊ณ ์ฌ์ฌ์ฉํ ์ ์๋๋ก ํ์ฉmax-age=31536000: ์บ์ ์์ฑ ํ 1๋
(31,536,000์ด) ๋์ fresh ์ํ ์ ์งimmutable: ์ ํจ ๊ธฐ๊ฐ ๋ด ๋ฆฌ์์ค๊ฐ ๋ณ..
[Next.js] API ๋ผ์ฐํธ ๋ณดํธํ๊ธฐ - Unkey
[Next.js] API ๋ผ์ฐํธ ๋ณดํธํ๊ธฐ - Unkey
2025.03.30OpenAI ๊ฐ์ LLM(๋ํ ์ธ์ด ๋ชจ๋ธ) ๊ธฐ๋ฐ API๋ก ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ๋ค ๋ณด๋ฉด, ์์ฐ์ค๋ฝ๊ฒ ์ฌ์ฉ๋ ์ ํ์ด ํ์ํด์ง๋ค. Unkey๋ผ๋ API ๊ด๋ฆฌ ํ๋ซํผ์ ์ด์ฉํ๋ฉด API ํค ๊ด๋ฆฌ, ์์ฒญ ๋น๋ ์ ํ, ์ฌ์ฉ๋ ๋ถ์ ๊ฐ์ ๊ธฐ๋ฅ์ ์์ฝ๊ฒ ๊ตฌํํ ์ ์๋ค. API ์๋ํฌ์ธํธ๋ณ๋ก ์์ฒญ๋์ ์ ํํ๊ฑฐ๋ ์ฌ์ฉ์๋ง๋ค ๋ค๋ฅธ ์ ํ ์ ์ฑ
์ ์ค์ ํ ์๋ ์๋ค. Unkey ๋ฌด๋ฃ ์๊ธ์ (Free Tier)๋ API ํค 1000๊ฐ, ์ 15๋ง ๊ฑด์ ์์ฒญ๊น์ง ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ฐ์ธ ํ๋ก์ ํธ์ ์ฌ์ฉํ๊ธฐ ๋ฑ ์ข๋ค. Next.js๋ฅผ ์ฌ์ฉํ๋ค๋ฉด Unkey์์ ์ ๊ณตํ๋ SDK๋ฅผ ์ด์ฉํด์ ๋ ํธํ๊ฒ ํตํฉํ ์ ์๋ค. ์๋ฅผ ๋ค์ด ์๋ฒ ์ก์
์ด๋ API ๋ผ์ฐํธ์ ๋ฏธ๋ค์จ์ด์ฒ๋ผ ์ ์ฉํ์ฌ ์ธ์ฆ๋ ์์ฒญ๋ง ์ฒ๋ฆฌํ๊ฑฐ๋ ์ฌ์ฉ๋ ์ ํ์ ์ ์ฉํ ์ ์๋ค. Unk..
[Next.js] dnd-kit์ ํ์ฉํ ์นธ๋ฐ(Kanban) ๋ณด๋ ๋๋๊ทธ ์ค ๋๋กญ ๊ตฌํ
[Next.js] dnd-kit์ ํ์ฉํ ์นธ๋ฐ(Kanban) ๋ณด๋ ๋๋๊ทธ ์ค ๋๋กญ ๊ตฌํ
2025.03.18์ผ๋ฐ์ ์ผ๋ก ์นธ๋ฐ ๋ณด๋๋ ๋๋๊ทธ ์ค ๋๋กญ์ ํตํด ์ปฌ๋ผ์ด๋ ํ์คํฌ ์นด๋์ ์์๋ฅผ ์์ ๋กญ๊ฒ ๋ณ๊ฒฝํ ์ ์๋ค. ์ด๋ฌํ ๋๋๊ทธ ์ค ๋๋กญ ์ํธ์์ฉ์ dnd-kit ์ด๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๊ณตํ๋ Sortable ํ๋ฆฌ์
์ ์ด์ฉํ๋ฉด ๋ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋ค. dnd-kit์ ์ฝ์ด ํฌ๊ธฐ๊ฐ 10kb ์ ๋๋ก ๊ฐ๋ณ๊ณ ์ธ๋ถ ์์กด์ฑ์ด ์๋ ์ฅ์ ์ด ์๋ค. ๋๋๊ทธ ์ ํ, ์ ๋๋ฉ์ด์
, ์ถฉ๋ ๊ฐ์ง ๋ฑ์ ์ปค์คํฐ๋ง์ด์ง ํ ์๋ ์๋ค. dnd-kit์ ์ด์ฉํด ์นธ๋ฐ ๋ณด๋๋ฅผ ๊ตฌํํ๋ฉด์ ๋น๊ต์ ๊น๋ค๋กญ๋ค๊ณ ๋๊ผ๋ ๋ถ๋ถ๋ค์ ์ ๋ฆฌํด ๋ดค๋ค. ์ฝ๋๋ ์๋ ๋ ํฌ์งํ ๋ฆฌ์์ ํ์ธํ ์ ์๋ค.๋ ํฌ์งํ ๋ฆฌ: https://github.com/romantech/simple-kanban๋ฐ๋ชจ ํ์ด์ง: https://kanban.romantech.net ์นธ๋ฐ ๋ฐ์ดํฐ ๋ชจ..
[UI] Shadcn DropdownMenu์์ Dialog ์๋ ๋ซํ ๋ฌธ์ ํด๊ฒฐ
[UI] Shadcn DropdownMenu์์ Dialog ์๋ ๋ซํ ๋ฌธ์ ํด๊ฒฐ
2025.03.09Shadcn์ ๋๋กญ๋ค์ด(Dropdown)์ ํน์ ๋์์ด๋ ๊ธฐ๋ฅ ๋ฑ์ Popover ํํ๋ก ํ์ํ๋ ์ปดํฌ๋ํธ๋ค. ๋๋กญ๋ค์ด ๋ฉ๋ด ์์ดํ
(DropdownMenuItem)์ ํด๋ฆญํ์ ๋ ๋ค์ด์ผ๋ก๊ทธ(ํน์ AlertDialog)๋ฅผ ๋์ฐ๋ ค๋ ์๋๋ก ๋ฉ๋ด ์์ดํ
์ ์์์ผ๋ก ๋ค์ด์ผ๋ก๊ทธ๋ฅผ ์ถ๊ฐํ ์ ์๋ค. ํ์ง๋ง ์ด๋ ๊ฒ ์์ฑํ๋ฉด ๋ค์ด์ผ๋ก๊ทธ๊ฐ ์ ๋๋ก ์ด๋ฆฌ์ง ์๋๋ค. ๋ฉ๋ด ์ด๊ธฐ {/* ... */} ; Radix์ ๋ฉ๋ด ์์ดํ
์ ํด๋ฆญํ์ ๋ ๋๋กญ๋ค์ด์ด ์๋์ผ๋ก ๋ซํ๋๋ก ์ค๊ณ๋์ด ์๋ค. ๋๋ฌธ์ ๋ค์ด์ผ๋ก๊ทธ๋ฅผ ๋์ฐ๋ ๋ฉ๋ด ์์ดํ
์ ํด๋ฆญํ๋ฉด, ๋๋กญ๋ค์ด์ด ๋ซํ๋ ๊ธฐ๋ณธ ๋์์ ์ํด ๋ค์ด์ผ๋ก๊ทธ๊ฐ ์ด๋ฆฌ์ง ๋ง์ ๋ซํ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ์ ๋ฌธ์ ๋ก StackOverFlow๋ฅผ ์ฐพ์๋ณด๋ฉด Dr..
[CSS] :focus, :focus-visible ์ฐจ์ด์
[CSS] :focus, :focus-visible ์ฐจ์ด์
2025.03.06focus, focus-visible:focus: ๋ชจ๋ ํฌ์ปค์ค ์ํฉ(ํค๋ณด๋, ๋ง์ฐ์ค, ํฐ์น)์ ์ ์ฉ:focus-visible: ํค๋ณด๋ ํฌ์ปค์ค ๋๋ ๋ธ๋ผ์ฐ์ ์์ ํฌ์ปค์ค ํ์๊ฐ ํ์ํ๋ค๊ณ ํ๋จํ ๋๋ง ์ ์ฉTab ํค๋ก ํฌ์ปค์ค ์ด๋ ์(ํค๋ณด๋ ํฌ์ปค์ค)ํค๋ณด๋ ์
๋ ฅ์ ์ง์ํ๋ ์์(ํ
์คํธ ์
๋ ฅ ํ๋ ๋ฑ)… ์ผ๋ฐ์ ์ผ๋ก ๋ง์ฐ์ค ์ฌ์ฉ์์๊ฒ ๋ถํ์ํ ์ธ๊ณฝ์ ์ ์จ๊ธฐ๋ฉด์ ํค๋ณด๋ ์ฌ์ฉ์์ ์ ๊ทผ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด :focus์ :focus-visible ์ ํ์๋ฅผ ์กฐํฉํด์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค./* ๊ธฐ๋ณธ ํฌ์ปค์ค ์คํ์ผ ๋ฆฌ์
*/button:focus { outline: none;}/* ํค๋ณด๋ ํฌ์ปค์ค ์ ์คํ์ผ ์ ์ฉ */button:focus-visible { outline: 2px solid green;} outline, r..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ค ์์(Random Color) ์์ฑํ๊ธฐ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ค ์์(Random Color) ์์ฑํ๊ธฐ
2025.03.04HEX ์์ ์ฝ๋๋ RGB ์์์ RRGGBB ํ์์ 16์ง์๋ก ํํํ๋ค. HEX ์ฝ๋์ ์ต์ ๊ฐ์ #000000(๊ฒ์์, 10์ง์ 0), ์ต๋๊ฐ์ #FFFFFF(ํฐ์, 10์ง์ 16777215)์ด๊ธฐ ๋๋ฌธ์ 0~16777215 ์ฌ์ด์ ๋๋ค ์ซ์๋ฅผ 16์ง์๋ก ๋ณํํ๊ณ #๋ฅผ ๋ถ์ด๋ฉด ๋๋คํ HEX ์์ ์ฝ๋๊ฐ ๋๋ค.export const getRandomColor = ({ transparent = false, transProbability = 0.2,} = {}) => { // transProbability ํ๋ฅ ๋ก(๊ธฐ๋ณธ๊ฐ 20%) ํฌ๋ช
๊ฐ ๋ฐํ if (transparent && Math.random() Math.random() ๋ฉ์๋๋ 0 ์ด์ 1 ๋ฏธ๋ง(0 ≤ x approximately uniform..
[CSS] ์์ ๋งฅ๋ฝ Stacking Context
[CSS] ์์ ๋งฅ๋ฝ Stacking Context
2025.02.26TL;DR๊ธฐ๋ณธ์ ์ผ๋ก ์์๋ค์ DOM ์์์ ๋ฐ๋ผ ์์ธ๋ค.positioned(position ≠ static) ์์๋ non-positioned(position = static) ์์๋ณด๋ค ์์ ์์ธ๋ค.positioned ์์๋ค ์ค z-index ๊ฐ์ด ๋์์๋ก ์์ ์์ธ๋ค.์๋ก์ด ์์ ๋งฅ๋ฝ์ด ์์ฑ๋๋ฉด ์์ ์์๋ ํด๋น ๋งฅ๋ฝ ์์์ ์์๊ฐ ๊ฒฐ์ ๋๋ค. ์ค๋ช
์์ ๋งฅ๋ฝ(Stacking Context)์ HTML ์์๋ค์ ๊ฐ์์ z์ถ(๊น์ด) ๋ฐฉํฅ์ผ๋ก ๋ฐฐ์นํ๋ ๊ฐ๋
์ด๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์์๋ค์ DOM ์์์ ๋ฐ๋ผ ์์ธ๋ค. ์ฆ, ๋ค์ ์ ์ํ ์์์ผ์๋ก ํ๋ฉด์์ ์์ ์์นํ๋ค. position์ ์ ์ฉํ ์์(positioned)๋ position์ ์ ์ฉํ์ง ์์ ์์(non-positioned)๋ณด๋ค ์์ ์์ธ๋ค. posit..