๋ง ๊ทธ๋๋ก ๋ฌธ์ ๊ฐ ์๋๋ผ
Codekit์์ CSS grid-layout ์์ฑ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์๋ํ์ง ์๋๋ค๋ ๊ฒ์ ์์์ต๋๋ค. ๋๋ ๋ด ๊ตฌ๋ฌธ์ด ์๋ชป ๋์์ต๋๊น?
body
padding: 10px
display: grid
grid-template-columns: repeat(3 1fr)
grid-template-rows: repeat(3 1fr)
grid-template-areas:
header header header
section section section
footer footer footer
์ด๊ฒ์ @nex3์ ๋ํ ์ง๋ฌธ์ฒ๋ผ ๋ค๋ฆฝ๋๋ค. ์ด ๊ตฌ๋ฌธ์ ์ต์ Ruby Sass 3.5.0 ๋น๋์์ ๊ตฌ๋ฌธ ์ค๋ฅ๋ฅผ ์ผ์ผํต๋๋ค. ๋ฐ๋ผ์ ์ง์ ๊ธฐ๋ฅ์ผ ์ ์์ง๋ง ๊ตฌ๋ฌธ์ด ์ฌ๋ฐ๋ฅด์ง ์์ ์ ์์ต๋๋ค.
๋ค์ฌ์ฐ๊ธฐ๋ ๊ตฌ๋ฌธ์ ์ฌ๋ฌ ์ค ์์ฑ์ ์ง์ํ์ง ์์ต๋๋ค. ๋น์ ์ ์์ฑํด์ผํฉ๋๋ค
body
padding: 10px
display: grid
grid-template-columns: repeat(3 1fr)
grid-template-rows: repeat(3 1fr)
grid-template-areas: header header header section section section footer footer footer
๋ณ๊ฑฐ ์๋์ง๋ง ์ง๊ธ ์ ๊ฐ ๋๋ฆด ์ ์๋ ์ต์ ์ ๋๋ค.
libsass์์ ์์ ์ด ํ์ํ์ง ์์ผ๋ฏ๋ก ๋ซ์ต๋๋ค.