์ด๋ ต์ง ์๊ฒ CSS ๋ ์ด์์ ์ก๊ธฐ
๐ค ๋ชฉ์
css๋ฅผ ์ง์ง ๋ง์ด ์๋ดค๋ค.. flutter๋ฅผ ์ด์ฉํด์ UI ๊ตฌํํด๋ด๋ ์ผ์ ์ด์ ์ต์ํด์ก๊ธฐ ๋๋ฌธ์ ์คํ์ผ๋ง ํ๋ ๊ฒ์ ์ง์ง ๊ฐ๋ณ๊ฒ ์ฌ๊ฒผ๋ค๊ฐ ํฐ์ฝ ๋ค์ณค๋ค. ์ด๋ฒ์ ๊ฒธ์ํ ๋ง์์ผ๋ก css ๊ธฐ์ด๋ถํฐ ๋ฐ์ํ์ผ๋ก ๋ ์ด์์์ ์ก๋ ์ฌ๋ฌ ์ข์ ๋ฐฉ๋ฒ๋ค์ ๋ํด ์กฐ์ฌํด๋ดค๊ณ ๋ง์ง๋ง์ผ๋ก ๊ฐ๋จํ๊ฒ github project๋ฅผ ๋ฐ๋ผํ๋ฉฐ ์ค์ต์ ์งํํ๋ค.
๐ ์ฐธ๊ณ ์๋ฃ
flex box๋ก ๋ง๋ค ์ ์๋ 10๊ฐ์ง ๋ ์ด์์(๋ค์ด๋ฒ D2)
๐ฆ Box Sizing
๋ธ๋ผ์ฐ์ ๋ ๋ฐ์ค๋ชจ๋ธ์ ์ ๋ณด๋ฅผ ๊ทผ๊ฑฐ๋ก ๋ ๋๋ง์ ์งํํ๋ค.
์ฌ๊ธฐ์ width์ height๋ ๋ฐ์ค์ ์ ์ฒด ์ฌ์ด์ฆ๋ฅผ ๋งํ๋ ๊ฒ์ด ์๋๋ผ ํ๋์ ์์ญ์ธ contents ์์ญ์ ๋๋น์ ๋์ด๋ง์ ์๋ฏธํ๋ค.
์ด ๋ง์ธ ์ฆ์จ ๋ง์ผ width 100%๋ฅผ ์ฃผ๊ณ padding์ด๋ border ๊ฐ์ ์ฃผ๋ฉด width = 100% + padding, border ๊ฐ
์ด ๋์ด box๊ฐ ์์ํ๋ ๊ณต๊ฐ ๋ฐ์ผ๋ก ์์ ธ๋์ค๊ฒ ๋๋ค.
์ด ์ํ์์ ๋ฐ์ค์ ์ฌ์ด์ฆ๋ฅผ ์ ๋๋ก ์ธก์ ํ๋ ค๋ฉด contents ๋๋น + ์์ชฝ padding ๊ฐ + ์์ชฝ border ๊ฐ์ ๊ตฌํด์ผ ํ๋คโฆ ์ด๊ฑธ ๊ณ์ฐํด์ ๋ ์ด์์์ ์ก๊ธฐ๋ ์ฝ์ง ์๋ค. ๐ญ
โ ๊ทธ๋ ๋ค๋ฉด ๋ฐ์ค๋ฅผ ์ด์ฉํด์ ๋ ์ด์์์ ์ก์ผ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น?
์ด๋ด ๋ ์ฌ์ฉํ๋ฉด ์ข์๊ฒ border-box ์ด๋ค!
contents์ size๋ง์ผ๋ก width๋ฅผ ์ค์ ํ๋ box-sizing์ content-box๋ก box-sizing์ default ๊ฐ์ด๋ค.
border-box๋ ์๋ ๊ทธ๋ฆผ๊ณผ ๊ฐ์ด ๋ฐ์ค์ margin์ ์ ์ธํ ์์ชฝ border ๊ฐ + ์์ชฝ padding ๊ฐ + contents ๋๋น๋ฅผ width๋ก ํํํ๊ธฐ ๋๋ฌธ์ ๋ฐ์ค๋ผ๋ฆฌ์ ๋ ์ด์์์ ์ก๊ธฐ ์๋นํ ํธํ๋ค. ๐
๊ทธ๋์ ์น์์ ๋ค์๊ณผ ๊ฐ์ด default box-sizing์ border-box๋ก ๋ฐ๊ฟ๋๊ธฐ๋ ํ๋ค.(github๋ ๋ง์ฐฌ๊ฐ์ง์ด๋ค.๐)
* {
box-sizing: border-box;
}
๐ช Flex Box
โ ๋ง์ผ 3๊ฐ์ ๋ฐ์ค๋ฅผ ์น ํ์ด์ง์ ๋๋น์ ๋ง์ถฐ์ 1:1:1 ๋น์จ๋ก ๋์ฐ๊ณ ์ถ๋ค๋ฉด?
์ด ๋ block, float ์ด๋ฐ ์ ๋ค์ ์ฌ์ฉํ๋ฉด ์๊ฐ๋ณด๋ค ๊ตฌํ์ด ์ฝ์ง ์์์ง๋ ๋ชจ๋ฅด๊ฒ ๋ค.
์ด๋ด ๋ ์ธ ์ ์๋๊ฒ ๋ฐ๋ก๋ฐ๋ก Flex Box์ด๋ค.
Flex box๋ ์ค์ width์ height๋ฅผ ์ฃผ์ง ์๊ณ ๋ ๋น์จ๋ก layout์ ๊ตฌ์ฑํ ์ ์๊ธฐ ๋๋ฌธ์ ๋์ ์ผ๋ก ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ ์ด์์์์ ์์ฃผ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ค.
flex๋ ํฌ๊ฐ ๋๊ฐ์ง๋ก ๊ตฌ์ฑ๋์ด ์๋ค. ๋ฐ๋ก ๋น์จ๋ก ์ด๋ฃจ์ด์ง Flex Item๊ณผ ์ด๋ค์ ํฌํจํ๊ณ ์๋ Flex-container์ด๋ค.
์ด๋ฏธ์ง ์ถ์ฒ: http://book.mixu.net/css/4-flexbox.html
๐ Flex Container
flex Container์ flex item์ ๋ด๋ container์ด๋ค.
์ด ์น๊ตฌ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
.flex_container {
display: flex;
flex-direction: column; /* ๋ฐฉํฅ */
}
display๋ฅผ flex๋ก ์ค์ ํด์ฃผ๊ณ flex-direction์์ flex์ ๋ฐฉํฅ์ ์ ํด์ค๋ค.
๐ฅ Flex Item
flex-item์ flex container๊ฐ ํ๊ณ ์๋ block์ด๋ค.
.flex-item {
flex-grow: 1; /* ์ฃผ์ด์ง ๊ณต๊ฐ์ ๋ฐ๋ผ ์ปค์ง๊บผ์ผ ๋ง๊บผ์ผ (x > 0 ? ์ปค์ ธ : ๊ณ ์ ) */
flex-shrink: 1; /* ์ฃผ์ด์ง ๊ณต๊ฐ์ ๋ฐ๋ผ ์ค์ด๋ค๊บผ์ผ ๋ง๊ฑฐ์ผ (x > 0 ? ์ค์ด๋ค์ด : ๊ณ ์ ) */
flex-basis: 0;
}
flex-grow, shrink๋ ์ฃผ์ด์ง flex container์ ๋ฐ๋ผ ์ค์ด๋ค์ง ๋์ด๋ ์ง๋ฅผ ๊ฒฐ์ ํ๋ ๊ฐ์ด๋ค.
flex-basis๋ ๊ธฐ์กด ์ฌ์ด์ฆ๋ฅผ ์ด๋ป๊ฒ ํ ์ง ์ ํ๋ ๊ฒ์ผ๋ก flex-base๋ฅผ 0์ผ๋ก ํ๋ฉด ๋ฌด์กฐ๊ฑด ๋น์จ๋ก, auto์ด๋ฉด ๊ฐ flex item์ contents ๋๋น์ ๋ง์ถฐ ์ฌ์ด์ฆ๋ฅผ ๋ฌ๋ฆฌํ๋ค.
์ด๋ฏธ์ง ์ถ์ฒ: https://d2.naver.com/helloworld/8540176
์ด ๋ flex ์์ฒด๋ฅผ ํน์ ์ ์๋ก ์ฃผ๋ฉด ๊ทธ ๊ฐ์ flex-grow์ ๊ฐ์ด ๋๊ณ flex-shrink๋ 1, flex-basis๋ 0์ด ๋๋ค.
.flex-item {
flex: 3; /* flex-grow : 3, flex-shrink: 1, flex-basis: 0 */
}
๊ทธ๋ฆฌ๊ณ ๋ง์ผ ์ฌ์ด์ฆ๊ฐ ๊ณ ์ ๋์ผ ํ๋ ์น๊ตฌ์๊ฒ๋ none์ ์ฃผ๊ณ ๊ทธ ์ ์ค๋ฅธ์ชฝ ๋์ ๋ค์ item์ด ๋ฑ ๋ถ๊ฒ ํ ์๋ ์๋ค. (header๋ footer์ ๋ง์ด ์ฐ์ธ๋ค!)
.flex-container {
display: flex;
}
.flex-item {
flex: none;
/* flex: 0 0 auto */
}
.flex-item-right {
margin-left: auto;
}
๐ฑviewport & media query
โhtml์ ๋ค์๊ณผ ๊ฐ์ ๋ฉํํ๊ทธ๋ ๋ฌด์จ ์ญํ ์ ํ ๊น?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
viewport๋ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ ์์ญ์ ๋งํ๋ค. ์น์ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์ ๋ ๋ํ๊ฒ ๋๋ฉด ์ฌ์ด์ฆ๊ฐ ๋ค๋ฅธ ์น์ ๋ด์ฉ์ ์ ๋๋ก ์ ๋ฌํ ์๊ฐ ์๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ ์์ ๊ฐ์ ์ค์ ์ ํตํด ์ค์ ๋ ๋๋ง๋๋ ์์ญ๊ณผ ๋ทฐํฌํธ์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ์ ์๋ค.
์์ ๊ฐ์ด width=device-width๋ฅผ ์ถ๊ฐํจ์ผ๋ก์จ ์ ์ฒด์ ์ธ ์น ํ์ด์ง์ width๊ฐ ์ค์ ๋๊ณ media query๋ฅผ ์ฌ์ฉํ๋ฉด width์ ๋ฒ์์ ๋ฐ๋ผ css๊ฐ ์ ์ฉ๋์ด ๊ฒฐ๊ณผ์ ์ผ๋ก ๋ฐ์ํ ์น์ ๋ง๋ค ์ ์๋ค.
โ์ฌ์ด์ฆ์ ๋ฐ๋ผ ์ด๋ป๊ฒ ๋ฐ์ํ๊ฒ ๋ง๋ค๊น?
๋ค์๊ณผ ๊ฐ์ด width๊ฐ max-width๋ฅผ ๋์ด๊ฐ์ง ์์ผ๋ฉด ์ฆ ๋ชจ๋ฐ์ผ์์ ๋ณผ๋ css๋ฅผ ๋ฌ๋ฆฌํ๋๋ก ์ฝ๋๋ฅผ ์์ฑ ํ๋ค.
@media (max-width: 544px) {
.task-columns {
flex-direction: column;
}
.task-column {
margin-right: 0px;
margin-bottom: 16px;
}
}
github project page ํด๋ก ํ๊ธฐ
๊ทธ๋ผ ๊นํ ํ๋ก์ ํธ ํ์ด์ง๋ฅผ ์ฌ๋๊น์ง ๊ณต๋ถํ ๋ฐฉ๋ฒ์ ์ด์ฉํด์ layout์ ์ก์๋ณด์.
์ผ๋จ css๋ฅผ http://meyerweb.com/eric/tools/css/reset/๋ฅผ ์ฐธ๊ณ ํด์ ์ด๊ธฐํ ํด์คฌ๊ณ , ์ด์ด์ ๊ฐ๋จํ๊ฒ ํ์ด์ง๋ฅผ ๊ตฌํํ๋ค.
๊ฐ๋จํ๊ฒ ๋ฐ๋ผ ๊ตฌํํ ๊ฒฐ๊ณผ ํ์ด์ง์ด๋ค.
ํ์ด์ง ๋๋น์ ๋ฐ๋ผ ๋ค์๊ณผ ๊ฐ์ด ๋ฐ์ํ๊ธฐ๋ ํ๋ค. ๐
ํ๊ณ
๋ฌผ๋ก ์์ง ๋ง์ด ๋ฏธ์ํ์ง๋ง ์ง๋์ฃผ ๊ฒช์๋ css ์ธ๋ ์ฆ์ ์กฐ๊ธ ๊ทน๋ณตํ ๊ฒ ๊ฐ์ ๋ง์กฑ์ค๋ฝ๋ค. ๐