์๋
ํ์ญ๋๊น
V3์ ์ํ๊ฐ ๊ถ๊ธํฉ๋๋ค. ์์ง ํ๋ ์ค ๋ฐ์ค๊ฐ ์ง์๋์ง ์์ต๋๊น?
๊ฐ์ฌ ํด์
v3๋ ๋ฒ ํ ๋ฆด๋ฆฌ์ค๊ฐ ์ผ๋ง ๋จ์ง ์์์ง๋ง ๋ ์ง๋ฅผ ์์ธกํ๊ธฐ๊ฐ ์ด๋ ต์ต๋๋ค. ์ด๊ฒ์ด ์คํ ์์ค์ ํน์ฑ์ ๋๋ค.
v2๋ ์ด๋ฏธ flexbox์ ์ ์๋ํฉ๋๋ค. float์ ๋ํด ํ๋ ๊ฒ์ฒ๋ผ ์ฃผ๋ณ์ mixin์ ๋น๋ํ ์ด์ ๊ฐ ์์ต๋๋ค. CSS ๊ตฌ๋ฌธ์ ๊ฐ์ ํ ์ข์ ๋ฐฉ๋ฒ์ ์์ง๋ง span()
๋ฐ gutter()
ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ ์ค ํญ๋ชฉ์ ๊ทธ๋ฆฌ๋์ ์ ๋ ฌํ ์ ์์ต๋๋ค.
.item {
flex: 1 1 span(2);
margin-right: gutter();
}
์ด๋ v3์์๋ ์ฌ์ ํ ์ ํจํฉ๋๋ค.
์๋ ํ์ธ์, ์ด ๋ฌธ์ ๊ฐ ์ข ๋ฃ๋ ์ง ์ค๋๋์๊ธฐ ๋๋ฌธ์ V3์ ์ํ๋ฅผ ๋ค์ ํ์ธํ๋ ๋์์ Susy์ ํจ๊ป ํ์ ๋๋ผ์ด ์์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
@ozke ๋งค์ฐ ๊ฐ๊น์์ง๊ณ ์์ต๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฒด ๋ฌธ์๊ฐ ๋๋ฝ๋์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
v3๋ ๋ฒ ํ ๋ฆด๋ฆฌ์ค๊ฐ ์ผ๋ง ๋จ์ง ์์์ง๋ง ๋ ์ง๋ฅผ ์์ธกํ๊ธฐ๊ฐ ์ด๋ ต์ต๋๋ค. ์ด๊ฒ์ด ์คํ ์์ค์ ํน์ฑ์ ๋๋ค.
v2๋ ์ด๋ฏธ flexbox์ ์ ์๋ํฉ๋๋ค. float์ ๋ํด ํ๋ ๊ฒ์ฒ๋ผ ์ฃผ๋ณ์ mixin์ ๋น๋ํ ์ด์ ๊ฐ ์์ต๋๋ค. CSS ๊ตฌ๋ฌธ์ ๊ฐ์ ํ ์ข์ ๋ฐฉ๋ฒ์ ์์ง๋ง
span()
๋ฐgutter()
ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ ์ค ํญ๋ชฉ์ ๊ทธ๋ฆฌ๋์ ์ ๋ ฌํ ์ ์์ต๋๋ค.์ด๋ v3์์๋ ์ฌ์ ํ ์ ํจํฉ๋๋ค.