๐1. ํ์ฌ ๋๋ผ๋ ๊ฐ์ ๊ณผ ์ํ๋ฅผ ๊ตฌ์ฒด์ ์ผ๋ก ์์ฑ ํ์ธ์.
ํ๋ก์ ํธ๋ฅผ ๋๋์ด ์์ํ๋๋ฐ ํ์ด 3๋ช
๊ณผ ํจ๊ปํ๋ ค๋ ๋ ๋ณต์กํ๊ณ ์ด๋ ต๋ค ์ปค๋ฎค๋์ผ์ด์
์ด ์ ๋ง ์ค์ํจ์ ์๊ฒ๋์๊ณ ๊ฐ์ง๊ฐ์์ด๋ค. ์๋ง๋ค๊ณ ํด์ ์ ๋ ๊ฐ์ธํ๋ ์ด ํ๋ฉด์๋๋ค. ๋ชจ๋๋ฅผ ๋๊ณ ๊ฐ์์๋ ๋ฆฌ๋ ์ญํ ์ด ํ์ํจ์ ๋ง์ด ๋๊ผ๋ค. ์์๋ชจ๋ฅด๋์ฌ๋๊ณผ ์ํ๋๋ฐ ํผ์ํ๋์ฌ๋ ์ค๋ํ๋ฉด์ ๋ง์ด ๋ฐฐ์ด๋ค.
๐2. ์ค๋ ํ์ตํ ๋ด์ฉ์ด ๋ฌด์์ธ๊ฐ์?
CSS flex, ๋ ์ด์์
๐3. ์ค๋ ํ์ตํ ๋ด์ฉ์ ๋ค์ ๋ดค์๋ ์ดํดํ๋๋ก ์ค๋ช
ํ์ธ์.
#css ์ฐธ์กฐ
๐4. ์ด๋ ค์ด(๋ชจ๋ฅด๋) ๋ด์ฉ์ ๋ฌด์์ด๋ฉฐ, ๊ทธ์ด์ ๋?
โ flex-direction: row, colunm ์ ๋ ฌ ์ค์ ํ
justify-content ์ค์ ์ ์ฃผ์ถ๊ณผ ๊ต์ฐจ์ถ์ ๋ฐฉํฅ์ด ์์ง ํท๊ฐ๋ฆฐ๋ค. โก ๊ทธ๋ฆฌ๊ณ ํ๋์ฝ๋ฉ์ ์ค์ด๊ณ ์ค๋ณต๊ณผ ๊ฐ๋ตํ๊ฒ ํ๋ ๋
ธํ์ฐ๋ ๋ง์ด ํ์ํ๋ค.
๐5. ๊ทธ๋ด์ฉ๋ฅผ ์๊ธฐ์ํด์ ํ๋ ๋
ธ๋ ฅ๊ณผ,๋๊ตฐ๊ฐ์๊ฒ ์ง๋ฌธํ๋ค๋ฉด ์ด๋ป๊ฒ ํ ๊ฒ์ธ๊ฐ?
โ ๊ตฌ๊ธ์์น, ์ ํ๋ธ๋ฅผ ๋ณด๋ฉฐ ๊ณ์ํด๋ณด๋ ์๋ฐ์ ์๋๊ฒ๊ฐ๊ณ , โก ์ฝ๋๋ฅผ ์ ์์ฑํ๊ธฐ์ํด ๋จผ์ ๋์ ์๋ค์ด ์ค๋๋ก ํ๋ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ด ๋ฌด์์ผ๊น์? ๋ผ๊ณ ์ง๋ฌธํ ๊ฒ์ด๋ค.
๐6. ํ์ด์ ๋ฌธ์ ์ ๊ณผ ๋ฐฐ์ธ์ ์?
A ,B ํ์ด์ ํจ๊ป ํ๋ค. 3๋ช
์ด์ ํ๋ค๋ณด๋, ํ๋ช
์ ๋ฆฌ๋๊ฐ ํ์ํ๋ค. Aํ์ด๋ ์๋ชปํ์ง๋ง ์ด์ ์ ์ด์๊ณ Bํ์ด๋ ์ํ๋๋ฐ ํผ์์ ์ด๋ฏธ ๋ค ํด๋ฒ๋ฆฌ๊ณ ์จ ์ผ์ด์ค์๋ค. ๋ด์ผ ์ข
ํฉ์ ์ผ๋ก ์ ๋๋ก ํ๊ฒ ๋ค.