๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์ CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ ์์ฝ๊ฒ ๋ ์ด์์์ ๋๋ฒ๊น ํ์ธ์. ๋ฐ์ํ ์น ๋์์ธ์ ์ํ CSS ๊ทธ๋ฆฌ๋ ๋ ์ด์์ ์๊ฐํ, ๋ถ์ ๋ฐ ์ต์ ํ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ: ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ๋ ์ด์์ ๋๋ฒ๊น ๋ง์คํฐํ๊ธฐ
CSS ๊ทธ๋ฆฌ๋๋ ์น ๋ ์ด์์์ ํ๋ช ์ ์ผ์ผํค๋ฉฐ ์ ๋ก ์๋ ์ ์ด ๊ธฐ๋ฅ๊ณผ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ณต์กํ ๊ทธ๋ฆฌ๋ ๊ตฌ์กฐ๋ ๋๋๋ก ๋๋ฒ๊น ํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ๋คํํ๋ ์ต์ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ๊ฐ๋ ฅํ CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ ๊ณตํ์ฌ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ฝ๊ฒ ์๊ฐํ, ๋ถ์ ๋ฐ ์ต์ ํํ ์ ์๋๋ก ์ง์ํฉ๋๋ค.
CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ๋ฌด์์ธ๊ฐ?
CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ๋๋ถ๋ถ์ ์ต์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ(Chrome, Firefox, Safari, Edge)์ ๋ด์ฅ๋ ๊ธฐ๋ฅ์ผ๋ก, CSS ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ํด ํน๋ณํ ์ค๊ณ๋ ์๊ฐ์ ์ค๋ฒ๋ ์ด์ ๋๋ฒ๊น ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์์ ์ํํ ์ ์์ต๋๋ค:
- ๊ทธ๋ฆฌ๋ ๋ผ์ธ ์๊ฐํ: ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ํ๊ณผ ์ด์ ํ์ํ์ฌ ๊ตฌ์กฐ๋ฅผ ์ฝ๊ฒ ํ์ ํ ์ ์์ต๋๋ค.
- ๊ฐ๊ฒฉ ๋ฐ ๊ฒน์นจ ์๋ณ: ๊ทธ๋ฆฌ๋ ์์ดํ ์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ฐฐ์น๋์ง ์์ ์์ญ์ ๊ฐ์กฐ ํ์ํฉ๋๋ค.
- ๊ทธ๋ฆฌ๋ ์์ญ ๊ฒ์ฌ: ์ด๋ฆ์ด ์ง์ ๋ ๊ทธ๋ฆฌ๋ ์์ญ๊ณผ ๊ทธ ๊ฒฝ๊ณ๋ฅผ ํ์ํฉ๋๋ค.
- ๊ทธ๋ฆฌ๋ ์์ฑ ์์ : ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ง์ ๊ทธ๋ฆฌ๋ ์์ฑ์ ํธ์งํ๊ณ ๋ณ๊ฒฝ ์ฌํญ์ ์ค์๊ฐ์ผ๋ก ํ์ธํ ์ ์์ต๋๋ค.
- ๋ฐ์ํ ๋ ์ด์์ ๋๋ฒ๊น : ๊ทธ๋ฆฌ๋๊ฐ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ด๋ป๊ฒ ์ ์ํ๋์ง ๊ฒ์ฌํฉ๋๋ค.
CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ์ ๊ทผ ๋ฐฉ๋ฒ
CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ ์ฌํ์ง๋ง ์ฝ๊ฐ์ ์ฐจ์ด๊ฐ ์์ ์ ์์ต๋๋ค.
Chrome ๊ฐ๋ฐ์ ๋๊ตฌ
- Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค (ํ์ด์ง์์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํ๊ณ "๊ฒ์ฌ"๋ฅผ ์ ํํ๊ฑฐ๋ F12 ํค๋ฅผ ๋๋ฆ ๋๋ค).
- "Elements" ํญ์ผ๋ก ์ด๋ํฉ๋๋ค.
- `display: grid` ๋๋ `display: inline-grid`๊ฐ ์ ์ฉ๋ HTML ์์๋ฅผ ์ฐพ์ต๋๋ค.
- "Styles" ์ฐฝ(๋ณดํต ์ค๋ฅธ์ชฝ์ ์์น)์์ `display: grid` ์์ฑ ์์ ์๋ ๊ทธ๋ฆฌ๋ ์์ด์ฝ์ ์ฐพ์ต๋๋ค. ์์ด์ฝ์ ํด๋ฆญํ์ฌ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ์ค๋ฒ๋ ์ด๋ฅผ ์ผญ๋๋ค.
- Elements ํจ๋ ๋ด์ "Layout" ํญ์์๋ ๊ทธ๋ฆฌ๋ ์ค์ ์ ์ฐพ์ ์ ์์ต๋๋ค("More tabs" ์์ด์ฝ `>>`์ ํด๋ฆญํด์ผ ํ ์๋ ์์ต๋๋ค).
Firefox ๊ฐ๋ฐ์ ๋๊ตฌ
- Firefox ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค (ํ์ด์ง์์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํ๊ณ "๊ฒ์ฌ"๋ฅผ ์ ํํ๊ฑฐ๋ F12 ํค๋ฅผ ๋๋ฆ ๋๋ค).
- "Inspector" ํญ์ผ๋ก ์ด๋ํฉ๋๋ค.
- `display: grid` ๋๋ `display: inline-grid`๊ฐ ์ ์ฉ๋ HTML ์์๋ฅผ ์ฐพ์ต๋๋ค.
- "Rules" ์ฐฝ(๋ณดํต ์ค๋ฅธ์ชฝ์ ์์น)์์ `display: grid` ์์ฑ ์์ ์๋ ๊ทธ๋ฆฌ๋ ์์ด์ฝ์ ์ฐพ์ต๋๋ค. ์์ด์ฝ์ ํด๋ฆญํ์ฌ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ์ค๋ฒ๋ ์ด๋ฅผ ์ผญ๋๋ค.
- Firefox๋ Layout ํจ๋(๋ณดํต ์ค๋ฅธ์ชฝ์ ์์น)์์ "Grid"๋ฅผ ์ ํํ์ฌ ์ ๊ทผํ ์ ์๋ ๋ ๊ณ ๊ธ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ํจ๋์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๋ ํฌ๊ด์ ์ธ ๋๋ฒ๊น ์ต์ ์ ์ ๊ณตํฉ๋๋ค.
Safari ๊ฐ๋ฐ์ ๋๊ตฌ
- Safari ํ๊ฒฝ์ค์ ์์ ๊ฐ๋ฐ์ ๋ฉ๋ด๋ฅผ ํ์ฑํํฉ๋๋ค (Safari > ํ๊ฒฝ์ค์ > ๊ณ ๊ธ > ๋ฉ๋ด ๋ง๋์์ ๊ฐ๋ฐ์์ฉ ๋ฉ๋ด ๋ณด๊ธฐ).
- Safari ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค (ํ์ด์ง์์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํ๊ณ "์์ ๊ฒ์ฌ"๋ฅผ ์ ํํ๊ฑฐ๋ Option + Command + I๋ฅผ ๋๋ฆ ๋๋ค).
- "Elements" ํญ์ผ๋ก ์ด๋ํฉ๋๋ค.
- `display: grid` ๋๋ `display: inline-grid`๊ฐ ์ ์ฉ๋ HTML ์์๋ฅผ ์ฐพ์ต๋๋ค.
- "Styles" ์ฐฝ(๋ณดํต ์ค๋ฅธ์ชฝ์ ์์น)์์ `display: grid` ์์ฑ ์์ ์๋ ๊ทธ๋ฆฌ๋ ์์ด์ฝ์ ์ฐพ์ต๋๋ค. ์์ด์ฝ์ ํด๋ฆญํ์ฌ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ์ค๋ฒ๋ ์ด๋ฅผ ์ผญ๋๋ค.
Edge ๊ฐ๋ฐ์ ๋๊ตฌ
Edge ๊ฐ๋ฐ์ ๋๊ตฌ๋ Chrome๊ณผ ๋์ผํ Chromium ์์ง์ ์ฌ์ฉํ๋ฏ๋ก ๊ณผ์ ์ด Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์ ๋์ผํฉ๋๋ค.
์ฃผ์ ํน์ง ๋ฐ ๊ธฐ๋ฅ
CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋๋ฒ๊น ํ๊ณ ์ดํดํ๋ ๋ฐ ๋์์ด ๋๋ ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค:
๊ทธ๋ฆฌ๋ ๋ผ์ธ ์๊ฐํ
๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ์ ์ฃผ์ ๊ธฐ๋ฅ์ ๊ทธ๋ฆฌ๋ ๋ผ์ธ์ ์๊ฐํํ๋ ๊ฒ์ ๋๋ค. ํ์ฑํ๋๋ฉด ๊ฒ์ฌ๊ธฐ๋ ์น ํ์ด์ง ์์ ๊ทธ๋ฆฌ๋ ๊ตฌ์กฐ๋ฅผ ์ค๋ฒ๋ ์ดํ์ฌ ๊ทธ๋ฆฌ๋์ ํ๊ณผ ์ด์ ๋ณด์ฌ์ค๋๋ค. ์ด๋ฅผ ํตํด ์์๊ฐ ๊ทธ๋ฆฌ๋ ๋ด์ ์ด๋ป๊ฒ ๋ฐฐ์น๋๋์ง ์ฝ๊ฒ ํ์ธํ ์ ์์ต๋๋ค.
์์:
3์ด ๋ ์ด์์์ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ค๊ณ ์์ํด ๋ณด์ธ์. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๊ฐ ์์ผ๋ฉด ํด๋น ์ด ๋ด์์ ์์๋ฅผ ์ ํํ๊ฒ ์ ๋ ฌํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ ์ด์ ๊ฒฝ๊ณ๋ฅผ ๋ช ํํ๊ฒ ๋ณด๊ณ ์ฝํ ์ธ ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๋ฐฐ์น๋์๋์ง ํ์ธํ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๋ ์์ญ ๊ฒ์ฌ
์ด๋ฆ์ด ์ง์ ๋ ๊ทธ๋ฆฌ๋ ์์ญ์ ๊ทธ๋ฆฌ๋ ๋ด์ ์์ญ์ ์๋ฏธ๋ก ์ ์ผ๋ก ์ ์ํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ์ด๋ฌํ ์์ญ์ ๊ฐ์กฐ ํ์ํ์ฌ ๋ ์ด์์์ ์ ์ฒด ๊ตฌ์กฐ๋ฅผ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ๋์์ค๋๋ค.
์์:
`header`, `navigation`, `main`, `sidebar`, `footer`์ ๋ํ ๊ทธ๋ฆฌ๋ ์์ญ์ ์ ์ํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ์ด๋ฌํ ๊ฐ ์์ญ์ ์๊ฐ์ ์ผ๋ก ๊ฐ์กฐ ํ์ํ์ฌ ํ์ด์ง์ ์ด๋ป๊ฒ ๋ฐฐ์ด๋์ด ์๋์ง ๋ช ํํ๊ฒ ๋ณด์ฌ์ค๋๋ค.
๊ฐ๊ฒฉ ๋ฐ ๊ฒน์นจ ์๋ณ
๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๊ฐ๊ฒฉ์ด๋ ๊ฒน์นจ์ ๊ฐ์กฐ ํ์ํ ์ ์์ต๋๋ค. ์ด๋ ์์น ์ง์ ์ค๋ฅ๋ฅผ ์๋ณํ๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
์์:
์ค์๋ก ๊ทธ๋ฆฌ๋ ์์ดํ ์ ์ ์๋ ๊ทธ๋ฆฌ๋ ๊ฒฝ๊ณ ๋ฐ์ ๋ฐฐ์นํ ๊ฒฝ์ฐ, ๊ฒ์ฌ๊ธฐ๊ฐ ์ด ๋ฌธ์ ๋ฅผ ๊ฐ์กฐ ํ์ํ์ฌ ์ค๋ฅ๋ฅผ ์ ์ํ๊ฒ ์์ ํ ์ ์๋๋ก ํฉ๋๋ค.
๊ทธ๋ฆฌ๋ ์์ฑ ์์
๋๋ถ๋ถ์ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ง์ ๊ทธ๋ฆฌ๋ ์์ฑ์ ํธ์งํ ์ ์๋๋ก ์ง์ํฉ๋๋ค. ์ด๋ฅผ ํตํด CSS ์ฝ๋๋ฅผ ์์ ํ๊ณ ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํ ํ์ ์์ด ๋ค์ํ ๊ฐ์ ์คํํ๊ณ ๋ณ๊ฒฝ ์ฌํญ์ ์ค์๊ฐ์ผ๋ก ํ์ธํ ์ ์์ต๋๋ค.
์์:
`grid-template-columns` ๋๋ `grid-template-rows` ์์ฑ์ ์กฐ์ ํ์ฌ ๋ ์ด์์์ ์ด๋ค ์ํฅ์ ๋ฏธ์น๋์ง ํ์ธํ ์ ์์ต๋๋ค. ๋ํ `grid-gap`์ ์์ ํ์ฌ ๊ทธ๋ฆฌ๋ ์์ดํ ๊ฐ์ ๊ฐ๊ฒฉ์ ์กฐ์ ํ ์ ์์ต๋๋ค.
๋ฐ์ํ ๋ ์ด์์ ๋๋ฒ๊น
๋ฐ์ํ ๋์์ธ์ ํ๋ ์น ๊ฐ๋ฐ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ทธ๋ฆฌ๋๊ฐ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ํด์๋์ ์ด๋ป๊ฒ ์ ์ํ๋์ง ๊ฒ์ฌํ ์ ์์ต๋๋ค. ๊ฐ๋ฐ์ ๋๊ตฌ์ ๋ฐ์ํ ๋์์ธ ๋ชจ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ฅ์น๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๊ณ ๊ทธ๋ฆฌ๋๊ฐ ์ด๋ป๊ฒ ์๋ํ๋์ง ํ์ธํ ์ ์์ต๋๋ค.
์์:
๋ชจ๋ฐ์ผํฐ, ํ๋ธ๋ฆฟ, ๋ฐ์คํฌํฑ ์ปดํจํฐ์์ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ด ์ด๋ป๊ฒ ๋ณด์ด๋์ง ํ ์คํธํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ํน์ ์ฅ์น์์ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ํ์ํ ์กฐ์ ์ ํ ์ ์์ต๋๋ค.
๊ณ ๊ธ ๊ธฐ์ ๋ฐ ํ
Chrome ๋ฐ Firefox์ "Layout" ํญ ์ฌ์ฉํ๊ธฐ
Chrome๊ณผ Firefox ๋ชจ๋ ์ ์ฉ "Layout" ํญ(์ฃผ๋ก "Elements" ๋๋ "Inspector" ํจ๋ ์๋์ ์์)์ด ์์ผ๋ฉฐ, ๋ ํฌ๊ด์ ์ธ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ๋๊ตฌ ์ธํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ฉ๋๋ค:
- ๊ทธ๋ฆฌ๋ ์ค๋ฒ๋ ์ด ํ์: ํน์ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ๋ํ ๊ทธ๋ฆฌ๋ ์ค๋ฒ๋ ์ด๋ฅผ ์ผญ๋๋ค.
- ๊ทธ๋ฆฌ๋ ์์ญ ์ด๋ฆ ํ์: ๊ทธ๋ฆฌ๋ ์์ญ์ ์ด๋ฆ์ ๊ทธ๋ฆฌ๋์ ์ง์ ํ์ํฉ๋๋ค.
- ๋ฌดํ ๊ทธ๋ฆฌ๋ ๋ผ์ธ ํ์ฅ: ์ฝํ ์ธ ๋ฅผ ๋์ด ๊ทธ๋ฆฌ๋ ๋ผ์ธ์ ํ์ฅํ์ฌ ์ ์ฒด ๊ทธ๋ฆฌ๋ ๊ตฌ์กฐ๋ฅผ ์๊ฐํํฉ๋๋ค.
- ๋ผ์ธ ๋ฒํธ: ํ๊ณผ ์ด์ ๋ผ์ธ ๋ฒํธ๋ฅผ ํ์ํฉ๋๋ค.
๊ทธ๋ฆฌ๋ ์ค๋ฒ๋ ์ด ์์ ์ฌ์ฉ์ ์ ์
๋น์ทํ ์์์ ๊ฐ์ง ๋ ์ด์์์ผ๋ก ์์ ํ ๋ ๊ฐ์์ฑ์ ๋์ด๊ธฐ ์ํด ๊ทธ๋ฆฌ๋ ์ค๋ฒ๋ ์ด์ ์์์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค. ์ด ์ต์ ์ ์ผ๋ฐ์ ์ผ๋ก ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ์ค์ ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋ ํํฐ๋ง
์ฌ๋ฌ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋๊ฐ ์๋ ๋ณต์กํ ์น ํ์ด์ง์์ ์์ ํ ๋, ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ํํฐ๋งํ์ฌ ํน์ ์ปจํ ์ด๋์ ๋ํ ์ค๋ฒ๋ ์ด๋ง ํ์ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ํ์ฌ ๋๋ฒ๊น ์ค์ธ ์์ญ์ ์ง์คํ ์ ์์ต๋๋ค.
Flexbox์ ํจ๊ป ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ์ฌ์ฉํ๊ธฐ
๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ CSS ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ํด ์ค๊ณ๋์์ง๋ง, ์ผ๋ถ ๊ธฐ๋ฅ์ Flexbox ๋ ์ด์์์ ๋๋ฒ๊น ํ ๋๋ ์ ์ฉํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ Flexbox ์ปจํ ์ด๋ ๋ด ์์ดํ ์ ์ ๋ ฌ์ ์๊ฐํํ ์ ์์ต๋๋ค.
์ค์ฉ์ ์ธ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
๋ฐ์ํ ๋ธ๋ก๊ทธ ๋ ์ด์์ ๊ตฌ์ถ
CSS ๊ทธ๋ฆฌ๋๋ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ ์ํ๋ ๋ฐ์ํ ๋ธ๋ก๊ทธ ๋ ์ด์์์ ๋ง๋๋ ๋ฐ ์ด์์ ์ ๋๋ค. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ์ฅ์น์์ ์ฝํ ์ธ ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๋ฐฐ์น๋์๋์ง ํ์ธํ ์ ์์ต๋๋ค.
์์:
๋ฐ์คํฌํฑ์์๋ ์ค์์ ์ฃผ์ ์ฝํ ์ธ , ์ค๋ฅธ์ชฝ์ ์ฌ์ด๋๋ฐ, ์ผ์ชฝ์ ๋ด๋น๊ฒ์ด์ ์ด ์๋ 3์ด ๋ ์ด์์์ ๊ฐ์ง ์ ์์ต๋๋ค. ๋ชจ๋ฐ์ผํฐ์์๋ ๋ด๋น๊ฒ์ด์ ์ด ์๋จ์ด๋ ํ๋จ์ ์๋ ๋จ์ผ ์ด ๋ ์ด์์์ผ๋ก ์ ํํ ์ ์์ต๋๋ค.
๋ณต์กํ ๋์๋ณด๋ ๋ง๋ค๊ธฐ
๋์๋ณด๋๋ ์ข ์ข ์ฌ๋ฌ ํจ๋๊ณผ ์์ ฏ์ด ์๋ ๋ณต์กํ ๋ ์ด์์์ ํ์๋ก ํฉ๋๋ค. CSS ๊ทธ๋ฆฌ๋๋ฅผ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ์ ํจ๊ป ์ฌ์ฉํ๋ฉด ์ด๋ฌํ ๋ ์ด์์์ ๋ ์ฝ๊ฒ ๋ง๋ค๊ณ ๋๋ฒ๊น ํ ์ ์์ต๋๋ค.
์์:
์ด๋ฆ์ด ์ง์ ๋ ๊ทธ๋ฆฌ๋ ์์ญ์ ์ฌ์ฉํ์ฌ ํค๋, ๋ด๋น๊ฒ์ด์ , ์ฃผ์ ์ฝํ ์ธ ์์ญ, ํธํฐ์ ๊ฐ์ ๋์๋ณด๋์ ์ฌ๋ฌ ์น์ ์ ์ ์ํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฌํ ์์ญ์ ์๊ฐํํ๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ๋ฐฐ์น๋์๋์ง ํ์ธํ ์ ์์ต๋๋ค.
๊ฐค๋ฌ๋ฆฌ ๋๋ ํฌํธํด๋ฆฌ์ค ๋์์ธํ๊ธฐ
CSS ๊ทธ๋ฆฌ๋๋ ๊ฐค๋ฌ๋ฆฌ์ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋๋ ๋ฐ๋ ์ ํฉํฉ๋๋ค. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ ํ๋ก์ ํธ๊ฐ ๊ท ๋ฑํ ๊ฐ๊ฒฉ์ผ๋ก ์ ๋ ฌ๋์๋์ง ํ์ธํ ์ ์์ต๋๋ค.
์์:
๊ฐ๋ณ์ ์ธ ์์ ์ด๊ณผ ํ์ ๊ฐ์ง ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋ง๋ ๋ค์, ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง์ ๊ฐ๊ฒฉ๊ณผ ์ ๋ ฌ์ ์กฐ์ ํ ์ ์์ต๋๋ค. ๋ํ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๋ ๋ค๋ฅธ ๋ ์ด์์์ ๋ง๋ค ์ ์์ต๋๋ค.
CSS ๊ทธ๋ฆฌ๋ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
CSS ๊ทธ๋ฆฌ๋์ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ธ์:
- ๋ ์ด์์ ๊ณํํ๊ธฐ: ์ฝ๋ฉ์ ์์ํ๊ธฐ ์ ์ ์ข ์ด๋ ๋์์ธ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๊ณํํ์ธ์. ์ด๋ ๊ตฌ์กฐ๋ฅผ ์๊ฐํํ๊ณ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ์ด๋ฆ ์๋ ๊ทธ๋ฆฌ๋ ์์ญ ์ฌ์ฉํ๊ธฐ: ์ด๋ฆ ์๋ ๊ทธ๋ฆฌ๋ ์์ญ์ ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๋์ ๋๋ค. ๋ํ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ ์ด์์์ ๋ ์ฝ๊ฒ ๋๋ฒ๊น ํ ์ ์๊ฒ ํด์ค๋๋ค.
- ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ฌ์ฉํ๊ธฐ: ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๋ ๋ฐ์ํ ๋ ์ด์์์ ๋ง๋์ธ์. ๊ฐ๋ฐ์ ๋๊ตฌ์ ๋ฐ์ํ ๋์์ธ ๋ชจ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ๊ธฐ๊ธฐ์์ ๋ ์ด์์์ ํ ์คํธํ์ธ์.
- ์ฒ ์ ํ๊ฒ ํ ์คํธํ๊ธฐ: ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ์์ ๋ ์ด์์์ ํ ์คํธํ์ฌ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ์ธ์. ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ์์ ํ์ธ์.
- ๋จ์ํจ ์ ์งํ๊ธฐ: ์ง๋์น๊ฒ ๋ณต์กํ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋ง๋ค์ง ๋ง์ธ์. ๊ฐ๋จํ ๊ตฌ์กฐ๋ก ์์ํ์ฌ ํ์์ ๋ฐ๋ผ ์ ์ฐจ ๋ณต์ก์ฑ์ ์ถ๊ฐํ์ธ์.
์ผ๋ฐ์ ์ธ ํจ์ ๊ณผ ํด๊ฒฐ ๋ฐฉ๋ฒ
์๋ชป๋ ๊ทธ๋ฆฌ๋ ์์ดํ ๋ฐฐ์น
ํจ์ : ๊ทธ๋ฆฌ๋ ์์ดํ ์ด ๊ทธ๋ฆฌ๋ ๋ด์์ ์ฌ๋ฐ๋ฅด๊ฒ ๋ฐฐ์น๋์ง ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ๊ทธ๋ฆฌ๋ ๋ผ์ธ์ ์๊ฐํํ๊ณ ๊ทธ๋ฆฌ๋ ์์ดํ ์ด ์ฌ๋ฐ๋ฅธ ํ๊ณผ ์ด์ ๋ฐฐ์น๋์๋์ง ํ์ธํ์ธ์. `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end` ์์ฑ์ ํ์ธํ์ธ์.
๊ฐ๊ฒฉ ๋ฐ ๊ฒน์นจ
ํจ์ : ๊ทธ๋ฆฌ๋ ์์ดํ ์ฌ์ด์ ๊ฐ๊ฒฉ์ด๋ ๊ฒน์นจ์ด ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๊ฒฉ๊ณผ ๊ฒน์นจ์ ๊ฐ์กฐ ํ์ํ์ธ์. `grid-gap` ์์ฑ์ ์กฐ์ ํ์ฌ ๊ทธ๋ฆฌ๋ ์์ดํ ๊ฐ์ ๊ฐ๊ฒฉ์ ์ ์ดํ์ธ์. ์ถฉ๋ํ๋ ์์น ์ง์ ๊ท์น์ด ์๋์ง ํ์ธํ์ธ์.
๋ฐ์ํ ๋ ์ด์์ ๋ฌธ์
ํจ์ : ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ด ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ํ์ง ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ๊ฐ๋ฐ์ ๋๊ตฌ์ ๋ฐ์ํ ๋์์ธ ๋ชจ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ฅ์น๋ฅผ ์๋ฎฌ๋ ์ด์ ํ์ธ์. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๊ฒ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์กฐ์ ํ์ธ์. `grid-template-columns` ๋ฐ `grid-template-rows` ์์ฑ์ ํ์ธํ์ธ์.
์ถฉ๋ํ๋ CSS ๊ท์น
ํจ์ : ์ถฉ๋ํ๋ CSS ๊ท์น์ด ์๊ธฐ์น ์์ ๋ ์ด์์ ๋์์ ์ ๋ฐํฉ๋๋ค.
ํด๊ฒฐ์ฑ : ๊ฐ๋ฐ์ ๋๊ตฌ์ Styles ์ฐฝ์ ์ฌ์ฉํ์ฌ ๊ทธ๋ฆฌ๋ ์์ดํ ์ ์ ์ฉ๋ CSS ๊ท์น์ ๊ฒ์ฌํ์ธ์. ์ถฉ๋ํ๋ ๊ท์น์ ์๋ณํ๊ณ ํ์์ ๋ฐ๋ผ ์กฐ์ ํ์ธ์. CSS ๋ช ์์ฑ์ ์ฃผ์ํ์ธ์.
๊ธฐ๋ณธ ๋๋ฒ๊น ์ ๋์ด์: ๊ณ ๊ธ ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ ํ์ฉ๋ฒ
๊ธฐ๋ณธ ์ฌํญ์ ์ต์ํด์ง๋ฉด ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ๋ ๊ณ ๊ธ ์์ ์ ํ์ฉํ ์ ์์ต๋๋ค:
์ฑ๋ฅ ๋ถ์
๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ ์ฃผ๋ก ๋ ์ด์์์ ์ค์ ์ ๋์ง๋ง, ๊ฐ์ ์ ์ผ๋ก ์ฑ๋ฅ ๋ถ์์ ๋์์ด ๋ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๋๊ฐ ํจ์จ์ ์ผ๋ก ๊ตฌ์กฐํ๋๊ณ ๋ถํ์ํ ๊ณ์ฐ(๊ณผ๋ํ `fr` ๋จ์ ๋ฑ)์ ํผํจ์ผ๋ก์จ ๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๊ธฐ์ฌํ ์ ์์ต๋๋ค.
ํ์ ๋๋ฒ๊น
๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ์ ์๊ฐ์ ํน์ฑ์ ํ์ ๋๋ฒ๊น ์ ํ๋ฅญํ ๋๊ตฌ๊ฐ ๋ฉ๋๋ค. ๊ฒ์ฌ๊ธฐ ์๋ ํ๋ฉด์ ์คํฌ๋ฆฐ์ท์ด๋ ํ๋ฉด ๋ นํ๋ฅผ ๊ณต์ ํ๋ฉด ๋ค๋ฅธ ๊ฐ๋ฐ์๋ ๋์์ด๋์๊ฒ ๋ ์ด์์ ๋ฌธ์ ๋ฅผ ์ ์ํ๊ฒ ๋ณด์ฌ์ค ์ ์์ต๋๋ค.
์๋ํํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ดํดํ๊ธฐ
CSS ๊ทธ๋ฆฌ๋ ํ๋ ์์ํฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ๊ฒ์ฌ๊ธฐ๋ฅผ ํตํด ๋ด๋ถ ์๋ ๋ฐฉ์์ ์ดํดํ๋ ๋ฐ ๋์์ ๋ฐ์ ์ ์์ต๋๋ค. ์์ฑ๋ ๊ทธ๋ฆฌ๋ ๊ตฌ์กฐ๋ฅผ ๊ฒ์ฌํ๊ณ ์ฌ์ฉ ์ค์ธ CSS ์์ฑ์ ํ์ธํ ์ ์์ต๋๋ค.
CSS ๊ทธ๋ฆฌ๋์ ๊ฐ๋ฐ์ ๋๊ตฌ์ ๋ฏธ๋
CSS ๊ทธ๋ฆฌ๋๋ ๋์์์ด ์งํํ๊ณ ์์ผ๋ฉฐ, ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ๊ทธ ์๋๋ฅผ ๋ง์ถ๊ณ ์์ต๋๋ค. ์์ผ๋ก ๋ค์๊ณผ ๊ฐ์ ๋ ๊ณ ๊ธ ๊ธฐ๋ฅ๋ค์ ๊ธฐ๋ํ ์ ์์ต๋๋ค:
- ๊ฐ์ ๋ ์๊ฐํ: ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋ํ ๋ ์ํธ์์ฉ์ ์ด๊ณ ์ ์ฉํ ์๊ฐํ ๊ธฐ๋ฅ.
- ์๋ํ๋ ๋๋ฒ๊น : ์ผ๋ฐ์ ์ธ ๊ทธ๋ฆฌ๋ ๋ ์ด์์ ๋ฌธ์ ๋ฅผ ์๋์ผ๋ก ๊ฐ์งํ๊ณ ์์ ์ ์์ ํด์ฃผ๋ ๋๊ตฌ.
- ๋์์ธ ๋๊ตฌ์์ ํตํฉ: Figma๋ Sketch์ ๊ฐ์ ๋์์ธ ๋๊ตฌ์์ ์ํํ ํตํฉ.
๊ฒฐ๋ก
CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ CSS ๊ทธ๋ฆฌ๋๋ก ์์ ํ๋ ๋ชจ๋ ์น ๊ฐ๋ฐ์์๊ฒ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. ์ด๋ฅผ ํตํด ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ฝ๊ฒ ์๊ฐํ, ๋ถ์ ๋ฐ ๋๋ฒ๊น ํ ์ ์์ด ๋ฐ์ํ์ด๊ณ ์ ๊ตฌ์กฐํ๋ ์น ํ์ด์ง๋ฅผ ๋ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ด ๊ฐ์ด๋์์ ๋ ผ์๋ ๊ธฐ๋ฅ๊ณผ ๊ธฐ์ ์ ๋ง์คํฐํจ์ผ๋ก์จ CSS ๊ทธ๋ฆฌ๋์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ๋ฐํํ๊ณ ์น ๊ฐ๋ฐ ๊ธฐ์ ์ ํ ๋จ๊ณ ๋์ด์ฌ๋ฆด ์ ์์ต๋๋ค.
์ด๋ฌํ ๋ด์ฅ ๋๊ตฌ์ ํ์ ๊ณผ์ํ๊ฐํ์ง ๋ง์ธ์! ์ด ๋๊ตฌ๋ค์ ๋จ์ํ ์ํ์ฐฉ์ค๋ ๋ณต์กํ CSS ๋๋ฒ๊น ๊ธฐ์ ์ ์์กดํ๋ ๊ฒ๋ณด๋ค ํจ์ฌ ํจ๊ณผ์ ์ด๊ณ ํจ์จ์ ์ผ ๋๊ฐ ๋ง์ต๋๋ค. ์ ํธํ๋ ๋ธ๋ผ์ฐ์ ์์ CSS ๊ทธ๋ฆฌ๋ ๊ฒ์ฌ๊ธฐ๋ฅผ ์คํํ๊ณ , ํ์ํ๊ณ , ๋ง์คํฐํ์ธ์.