์์์! ์! ๋ฑ! ๊น๋ํ๊ณ ! ์ผ์ค์๊ฒ! ์ ๋ฆฌํ๋ flex & grid ์ฑ ์ ๋ฌด๋ฃ ๊ฐ์์ ๋๋ค. ์คํ์์ค ๋งํฌ, ํด๋น ์ฑ ๊ณผ Notion ๋งํฌ๋ ๋ฌด๋ฃ๋ก ์ด์ฉํ์ค ์ ์์ต๋๋ค. ๋น์๋ฆฌ ํ๋ก์ ํธ๋ก ๊ต์ฌ ํ์ฉ๋ ํ๋ฝ ์์ด ๊ฐ๋ฅํฉ๋๋ค.
Flex
Grid
์ฑ๋ฐฐ ๋ ์ด์์
"flex&grid ์ค์ต, ์นํธ์ํธ, PDF ์๋ฃ๊น์ง ํ ๊ณณ์์!"
์ง์๊ณต์ ์ | ์ฅํจ์
ํ์ค์๊ฐ | ๋ฌธ์ํ์ ์ง์๊ณต์ ์ ๊ด์ฌ์ด ๋ง์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ ๋๋ค. ๊ธ๋ก ๋งํ๋ ๊ฒ์ ์ข์ํ๋ ๊ธฐ๋ก๋ํ๋ก, ๋ธ๋ก๊ทธ๋ฅผ ์ด์์ค์ ๋๋ค.
์ง์๊ณต์ ์ | ๋ฅ์ฌ์ค
ํ์ค์๊ฐ | ์ธ์๊ณผ ์ฌ๋์ ๊ด์ฌ์ด ๋ง์ ์ฃผ๋์ด ๊ฐ๋ฐ์ ์ ๋๋ค. ์ ๊ฐ ์ฌ๋์ค๋ฝ๊ฒ ์ด๋ฃจ๋ง์ง ์ฝ๋๊ฐ ๊ณต๊ณต์ ์ด์ต์ ์ํด ๋๋ฆฌ๋๋ฆฌ ์ฌ์ฉ๋์์ผ๋ฉด ํ๋ ๋ฐ๋์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋ธ๋ก๊ทธ์ ๋ฏธ๋ฌํ ์ฝ๋์๋๋ฐญ, SNS๋ก ํจ๊ป ์ํต์ ๋๋์์ผ๋ฉด ํฉ๋๋ค.
์ง์๊ณต์ ์ | ํ์งํ
ํ์ค์๊ฐ | ์ฝํ์ ํ๋ก ํธ์ค๋ ์ ์น์ ์์ฅ ํ์งํ์ ๋๋ค. ํ๋ก ํธ์ค๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ ๋ชจ๋ ๋ถ๋ค์๊ฒ ๋์์ด ๋๋ ์์์ ์ ์ํฉ๋๋ค.
์ง์๊ณต์ ์ | ์ํ๋ ฌ
ํ์ค์๊ฐ | ๋น ๋ฅด๊ฒ ๋ณํํ๋ ์ธ์์์ ์ธ์ ๋ ๋ณํ ํ ์ค๋น๊ฐ ๋ ์ฃผ๋์ด๊ฐ๋ฐ์์ ๋๋ค. ์์ผ๋ก ๋ง์ ๋ถ๋ค๊ณผ ์ํตํ๋ฉฐ ๊ธ์ ์ ์ธ ์ํฅ๋ ฅ์ ๋๋ฆฌ ํผ๋จ๋ฆฌ๊ณ ์ถ์ต๋๋ค.
์ง์๊ณต์ ์ | ์ฌ์ํฌ
ํ์ค์๊ฐ | ๋ฉํ์ธ์ง๋ฅผ ํตํด ์ฑ์ฅ์ ๋ฐฉํฅ์ฑ์ ๋ํด ๋ ๊ณ ๋ฏผํ๋ ์ฃผ๋์ด ๊ฐ๋ฐ์์ ๋๋ค. ๋ธ๋ก๊ทธ๋ฅผ ํตํด ์ง์์ ๊ณต์ ํ๊ณ ์ํตํ๋ฉฐ ํจ๊ป ์ฑ์ฅํ๊ณ ์ถ์ต๋๋ค.
์ง์๊ณต์ ์ | ์๋คํ
ํ์ค์๊ฐ | ๋ชจ๋์๊ฒ ์ข ๋ ํธ๋ฆฌํ ์ธ์์ ๋ง๋ค๊ณ ์ ๋ ธ๋ ฅํ๋ ์ฃผ๋์ด ๊ฐ๋ฐ์์ ๋๋ค. ํจ๊ป ์ฑ์ฅํ๋ ์ฆ๊ฑฐ์์ ๋๋ฆฌ ์๋ฆฌ๊ณ ์ถ์ต๋๋ค.
์น ์๋น์ค, ๋ฌด๋ฃ ์ ์์ฑ , ์์ ๊ฐ์ 3๋จ ์ฝค๋ณด๋ฅผ ๋ฌด๋ฃ ์คํ์์ค๋ก ์ ๊ณตํฉ๋๋ค.
flex์ grid๋ CSS์์ ์ฌ์ฉํ๋ ๋ ์ด์์์ ์ํ ์ต์ ๊ธฐ๋ฒ์
๋๋ค.
flex๋ 1์ฐจ์(X ๋๋ Y์ถ์ ํ ๋ฐฉํฅ) ๋ ์ด์์์, grid๋ 2์ฐจ์(X, Y์ถ ์์ชฝ ๋ฐฉํฅ) ๋ ์ด์์์ ์ก๋ ๋ฐ ๋ง์ด ํ์ฉํฉ๋๋ค.
Q. ์ง์๊ณต์ ์๊ฐ ์ฌ๋ฌ ๋ช ์ธ๋ฐ, ์์ ๋ง๋ค ๊ฐ์ฌ๊ฐ ๋ค๋ฅธ๊ฐ์?
ํด๋น ์์์ ์คํ์์ค ํ๋ก์ ํธ "Flex & Grid" ๊ธฐ์ฌ์ ๋ถ๋ค๊ป์ ์ง์ ์ฐ์ด์ฃผ์ ๊ฐ์์ ๋๋ค. ๋ นํ ํ๊ฒฝ์ ์ฐจ์ด๋ก ์๋ ๋ฐ ์์ง์ ์ฐจ์ด๊ฐ ์์ ์ ์์ผ๋ ์ํด ๋ถํ๋๋ฆฝ๋๋ค.
Q. Flex/Grid๋ฅผ ์์ ๋ชจ๋ฅด๋ ์ด๋ณด์๋ ์๋๋ฐ, ๊ฐ์๋ฅผ ์ด๋ป๊ฒ ํ์ฉํ๋ฉด ์ข์๊น์?
์ํ๋ ๋ถ๋ถ๋ง ๋ณด์ค ์ ์์ต๋๋ค. Flex & Grid ์น ์๋น์ค์ ์ ์ํ์๋ฉด CheetSheet๋ฅผ ์ ๊ณตํด๋๋ฆฝ๋๋ค. ์ด๊ฒ์ ๊ฒ ํด๋ฆญํด๋ณด๊ณ ์ ๋ชจ๋ฅด๊ฒ ๋ค ํ๋ ๋ถ๋ถ๋ง ๊ฐ์๋ก ๋ณด์๋ฉด ์ข์ต๋๋ค. (์์ ์ฑํฐ๋ง๋ค ๊ฐ์ฌ๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ์์์๋ถํฐ ์๋๋ก ์ญ ํ ํ๋ฆ์ ์์ฒญํ๋ ๊ฒ์ ๊ถํด๋๋ฆฌ์ง๋ ์์ต๋๋ค.)
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
Flex์ Grid๋ฅผ ์ฒ์ ์ ํ๋ ๋ถ
๋ ์ด์์ ๊ณต๋ถ๋ฅผ ํ๊ณ ์์ผ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
96,402
๋ช
์๊ฐ์
2,271
๊ฐ
์๊ฐํ
159
๊ฐ
๋ต๋ณ
4.8
์
๊ฐ์ ํ์
80
๊ฐ
๊ฐ์
์ ์ฃผ์์ ๊ฐ์ฅ ํซํ ๊ฐ๋ฐ์๋ค์ด ๋ชจ์ฌ ์๋นํ ๋ถํธ์บ ํ! ์ด์ ์๋ ์ฒญ๋ ๋ค์๊ฒ ์ด์ ๋งํผ ์ฑ์ฅํ ์ ์๋ ๊ธฐํ๋ฅผ ์ ๊ณตํฉ๋๋ค!
์ ์ฃผ์ฝ๋ฉ๋ฒ ์ด์ค์บ ํ๋ ์ ์ฃผ์์ ๊ฐ์ฅ ํฐ ICT ๊ต์ก ํ์ฌ๋ก ์นด์นด์ค, ๊ตฌ๋ฆ, ์ ์ฃผ์ฐํ์ตํฉ์ ๋ฑ ๊ธฐ์ ์ง์์ฒด์ ํจ๊ป ์งํํ๊ณ ์์ต๋๋ค.
์๋น์ค ๊ตฌ์ถ ์ฑ๊ณต ๊ฒฝํ์ ํตํด ์ด ์ทจ์
๋ ์๋์ ์์ ๊ฐ, ์์กด๊ฐ, ์ฑ์ทจ๊ฐ, ๊ทธ๋ฆฌ๊ณ ์๋ฆฝํ ์ ์๋ ๋ฅ๋ ฅ์ ๋ฐฐ์ํด ๋ณด์ธ์!
์ผ๋ผ์ฐจ์ฐจ ์ฒญ์ถ ํ์ดํ ์ ๋๋ค! ๐
์ ์ฒด
25๊ฐ โ (1์๊ฐ 55๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
4. Flex๋?
06:04
5. flex-direction
02:30
6. justify-content
05:15
8. Flex-wrap
04:54
9. Flex-basis
06:03
10. Flex-grow
02:48
11. Flex-shrink
04:07
12. align-self
05:52
13. order
03:55
14. z-index
00:56
15. Grid๋?
06:48
17. repeat, fr
03:23
19. Gap
03:51
๋ฌด๋ฃ