๐Ÿค” ๋ชฉ์ 

css๋ฅผ ์ง„์งœ ๋งŽ์ด ์–•๋ดค๋‹ค.. flutter๋ฅผ ์ด์šฉํ•ด์„œ UI ๊ตฌํ˜„ํ•ด๋‚ด๋Š” ์ผ์— ์ด์ œ ์ต์ˆ™ํ•ด์กŒ๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒ€์ผ๋ง ํ•˜๋Š” ๊ฒƒ์€ ์ง„์งœ ๊ฐ€๋ณ๊ฒŒ ์—ฌ๊ฒผ๋‹ค๊ฐ€ ํฐ์ฝ” ๋‹ค์ณค๋‹ค. ์ด๋ฒˆ์— ๊ฒธ์†ํ•œ ๋งˆ์Œ์œผ๋กœ css ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ์žก๋Š” ์—ฌ๋Ÿฌ ์ข‹์€ ๋ฐฉ๋ฒ•๋“ค์— ๋Œ€ํ•ด ์กฐ์‚ฌํ•ด๋ดค๊ณ  ๋งˆ์ง€๋ง‰์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ github project๋ฅผ ๋”ฐ๋ผํ•˜๋ฉฐ ์‹ค์Šต์„ ์ง„ํ–‰ํ–ˆ๋‹ค.


๐Ÿ“— ์ฐธ๊ณ  ์ž๋ฃŒ

poiemaweb ํŠœํ† ๋ฆฌ์–ผ

flex box๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” 10๊ฐ€์ง€ ๋ ˆ์ด์•„์›ƒ(๋„ค์ด๋ฒ„ D2)


๐Ÿ“ฆ Box Sizing

css-layout-1.png

๋ธŒ๋ผ์šฐ์ €๋Š” ๋ฐ•์Šค๋ชจ๋ธ์˜ ์ •๋ณด๋ฅผ ๊ทผ๊ฑฐ๋กœ ๋ Œ๋”๋ง์„ ์ง„ํ–‰ํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ 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๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ•์Šค๋ผ๋ฆฌ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก๊ธฐ ์ƒ๋‹นํžˆ ํŽธํ•˜๋‹ค. ๐Ÿ

css-layout-2.png

๊ทธ๋ž˜์„œ ์›น์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด 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์ด๋‹ค.

css-layout-3.png

์ด๋ฏธ์ง€ ์ถœ์ฒ˜: 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 ๋„ˆ๋น„์— ๋งž์ถฐ ์‚ฌ์ด์ฆˆ๋ฅผ ๋‹ฌ๋ฆฌํ•œ๋‹ค.

css-layout-4.png

์ด๋ฏธ์ง€ ์ถœ์ฒ˜: 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-layout-5.png

์ผ๋‹จ css๋ฅผ http://meyerweb.com/eric/tools/css/reset/๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ์ดˆ๊ธฐํ™” ํ•ด์คฌ๊ณ , ์ด์–ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ–ˆ๋‹ค.

๊ฐ„๋‹จํ•˜๊ฒŒ ๋”ฐ๋ผ ๊ตฌํ˜„ํ•œ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€์ด๋‹ค.

css-layout-6.png


ํŽ˜์ด์ง€ ๋„ˆ๋น„์— ๋”ฐ๋ผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฐ˜์‘ํ•˜๊ธฐ๋„ ํ•œ๋‹ค. ๐Ÿ‘

css-layout-7.png


ํšŒ๊ณ 

๋ฌผ๋ก  ์•„์ง ๋งŽ์ด ๋ฏธ์ˆ™ํ•˜์ง€๋งŒ ์ง€๋‚œ์ฃผ ๊ฒช์—ˆ๋˜ css ์šธ๋ ์ฆ์„ ์กฐ๊ธˆ ๊ทน๋ณตํ•œ ๊ฒƒ ๊ฐ™์•„ ๋งŒ์กฑ์Šค๋Ÿฝ๋‹ค. ๐Ÿ˜„