
๐ฆKEEP
- ๊ทธ๋, flex-flow๋ผ๋ ๊ฒ ์์์ง
- ๋ฐ์ํ ์น ํ์ด์ง ๋ง๋ค ๋ flex box๋ ์ ๋ง... ์ต๊ณ ์ธ ๊ฒ ๊ฐ๋ค. ์ ์ ๋ ๊น ํ๊ณ ํค๋ณด๋๋ง ๋๋๋ฆฌ๋ค ๋ฌธ๋ ์ด๋ด ๋ ์ผ๋ ์์ฑ์ด ์์๋ ๊ฑฐ ๊ฐ์๋ฐ... ํ๋ค๊ฐ ๊ฒฐ๊ตญ ํด๋๋ค. ๋ฐ๋ด ํ๋ ์ค ํ๋ก์ฐ์ผ, ๊ณ ๋ง์!
- ๋๋ฉ ํ์ด์ง ๋ง๋ค๊ณ ๊ฐ์ ํด์ค๊ณผ ๋น๊ต
- ์ฐ์ฌ๊ณก์ ๋์ ์ฝ๋ฉ์ ํ HTML, CSS ๊ฐ์์ ์ค์ต ๊ณผ์ ์ธ ๋๋ฉ ํ์ด์ง๋ฅผ ๋ง๋ค์๋ค. ์ก์์ผ๋ก๋ ๊ฑฐ์ ๋น์ทํ๊ฒ ๋ง๋ ํ์ ํด์ค ์ฝ๋์ ๋น๊ตํ๋ค.
- ๋๋ div๋ง๋ค margin์ ์ ์ฉํ๋๋ฐ, ๊ทธ๋ด ํ์ ์์ด ์์ div๋ฅผ ๊ฐ์ธ๋ ์ ์ฒด div ์์ padding์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ด ๋ ์ฌ์ ๋ณด์๋ค. ์ผ์ผ์ด margin์ ์ฃผ๋ฉด ์คํ์ผ์ ํต์ผํ๊ธฐ ์ด๋ ค์ฐ๋ ๋ถ๋ชจ ์์์ padding์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ด ๋ ์ข์ ๋ฏ.
- ํ
์คํธ์ ์ ์ฉํ ์ ์๋ ์์ฑ ์ค์ vertical-align์ด ์๋ค๋ ๊ฒ์ ์์ผ ๊นจ๋ฌ์๋ค. ๋ค์์ ๊ผญ ์จ๋ณด๋๋ก.
- ์์๋ฅผ ๋ง๋ค ๋ class ํ๋์ ๋ชจ๋ ์์ฑ์ ๋ค ์ง์ด ๋ฃ์ง ๋ง๊ณ , ๋ผ๋์ ๋ค๋ฅธ ์์ฑ๋ค์ ๋ถ๋ฆฌํ๋ ์ฐ์ต์ ํด๋ณด์. ๋ผ๋๋ ๊ฐ๊ณ ํน์ฑ ์์ฑ๋ง ๋ค๋ฅธ ์์๊ฐ ์ฌ๋ฌ ๊ฐ๋ผ๋ฉด ์ฝ๋์ ์ ์ฐ์ฑ์ด ์๊ธธ ๋ฏ.
- box-sizing๊ณผ padding์ ์กฐํฉ์ด ๊ด์ฐฎ๊ตฐ.
- z-index๋๋ ์นํด์ง์.
๐ฆPROBLEM
- CSS ์ง์ฅ
- ์์ง๋ ์ฝํ
์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ๊ณผ flex box๊ฐ ์ด๋ ต๋ค. ์ด๊ฒ์ ๊ฒ ์ ์ฉํด์ ์ํ๋ ๊ฒฐ๊ณผ๊ฐ ๋์๋ ์ดํดํ๊ณ ์ผ๋ค๊ธฐ๋ณด๋ค๋ ๊ทธ๋ฅ ์ป์ด ๊ฑธ๋ฆฐ ๊ฒ ๊ฐ์!
๐ฆTRY
- ๊ทธ์ ์ฝ๋๋ฅผ ๋ง์ด ์ง๊ณ ๋ง์ด ๋ง๋ค์ด ๋ณด๋ ์๋ฐ์
- ํฌํธํด๋ฆฌ์ค์ ๋ค์ด๊ฐ ๋งํผ ํ๋ฆฌํฐ๊ฐ ๋์ง ์๋๋ผ๋ ์ผ๋จ ๊ณ์ ๋ง๋ค์ด ๋ด์ผ๊ฒ ๋ค. ๋ง๋ค๋ค ๋ณด๋ฉด ์ดํด๋๊ฒ ์ง. ๊ทธ๋ผ๊ทธ๋ผ.
- ์์ง ๋ง์, ์ฝ๋ ์ง๊ธฐ ์ ์ ํญ์ ์ฝํฐ๋ถํฐ ์ง์
- ์ฝํฐ ๋ง๊ณ ๋ค๋ฅธ ๋ง์ด ์์ ํ
๋ฐ ์๊ฐ์ด ์ ๋๋ ๋์ถฉ ์ฝํฐ๋ผ๊ณ ํ์. ์๋ฌดํผ HTML์ด๋ , CSS๋ , JS๋ ๋ญ๊ฐ๋ฅผ ๋ง๋ค๊ธฐ ์ ์ ํ๊ธ๋ก ๊ณผ์ ์ ๋จผ์ ์ ์ด๋ณด์. ๊ธ์ ๊ฐ์ด๋ฐ ์ ๋ ฌ, ํฐํธ ์ฌ์ด์ฆ ๊ตฌ๋ถ, ๋ณธ๋ฌธ๊ณผ ๋ฒํผ ๋ถ๋ฆฌ ๋ฑ๋ฑ. ๊ทธ๋์ผ ์ฝ๋๊ฐ ๊ธธ์ด์ ธ๋ ๋ฐฉํฉํ์ง ์๋๋ค!