<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.container {
**display: flex;**
}
.item {
flex: 1;
}
flex-direction
,ย justify-content
,ย align-items ๋ฑ
์ฌ์ฉflex
,ย align-self
,ย order
๋ฑ ์ฌ์ฉMain Axis
: ์ฌ๋ฌ ๊ฐ์ flex item์ด ์์๋๋ก ๋ฐฐ์น๋๋ ๋ฐฉํฅflex-direction
ย ์์ฑ์ ์ํด์ ๊ฒฐ์ .row
(์ผโ์ค)์ด๋ค. column
์ผ๋ก ์ค์ ํ ๊ฒฝ์ฐ, ์โ ์๋ ๋ฐฉํฅ์ด ๋๋ค.justify-content
(main axis ๊ธฐ์ค ์ ๋ ฌ)ย or align-items
(cross axis ๊ธฐ์ค ์ ๋ ฌ) ์ ๋ ฌ ๋ฐฉํฅ์ ๊ณ ๋ คํ์ฌ ์ ์ฉํด์ํ๋ค.Cross Axis
: Main Axis
์ ์์ง์ ์ด๋ฃจ๋ ๋ฐฉํฅflex item์ main axis๋ฅผ ๊ธฐ์ค์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ์ง ๊ฒฐ์ ํ๋ค.
flex-direction
ย ์์ฑ์ดย row
๋ผ๋ฉด ์ข์ธก ์ ๋ ฌ,ย column
์ด๋ผ๋ฉด ์๋จ ์ ๋ ฌflex-end
,ย center
,ย space-between
,ย space-evenly
,ย space-around
๋ฑ๋ฑflex item์ cross axis๋ฅผ ๊ธฐ์ค์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ์ง๋ฅผ ๊ฒฐ์
stretch
- flex item์ flex container์ ๋์ด ๋๋ ๋๋น๋งํผ ๋๋ฆฐ๋ค.flex-direction
ย ์ดย row
์ผ ๊ฒฝ์ฐ ๋์ด๋งํผ ๋์ด๋๊ณ , column
์ด๋ฉด ๋๋น๋งํผ ๋์ด๋๋ค.flex
ย ์์ฑflex: 1;
ย ์คํ์ผ์ ์ ์ฉ - ๊ทธ flex item์ด ๋ชจ๋ ๊ณต๋ฐฑ์ ์ ์ flex: 1;
ย ์คํ์ผ์ ์ ์ฉ - ๊ณต๋ฐฑ์ ๊ท ๋ฑํ๊ฒ ์ ์ flex
ย ์์ฑ์ ๊ฐ์ ์๋ก ๋ค๋ฅด๊ฒ ์ฃผ๋ฉด - ๋ค๋ฅธ ๋น์จ๋ก ์ ์ (feat. Weekly Mission)
<head>
<meta property="og:title" content={data?.title}>
</head>
HTML๊ณผ CSS๋ฅผ ์ฌ์ฉํด ๊ตฌํํ๋ ์ํด๋ฆฌ ๋ฏธ์ ์ ์งํํ๋ค.
ํ์ ์๊ตฌ์ฌํญ์ ๋ค์๊ณผ ๊ฐ๋ค.
๊ตฌํํ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ ๋ค์๊ณผ ๊ฐ๋ค.
โโ header
โโ main
โโ section
โ โโ article
โโ footer
justify-content: space-between;
์ ํ์ฝ๊ฐ์ฅ ์ ๊ฒฝ ์ด ๊ฒ์ ์์ 2๊ฐ ํน์ 3๊ฐ๋ฅผ ์์ ๋์ ๋๋ํ ๋ฐฐ์นํ๋ ๊ฒ์ด์๋ค. display : inline-block
์ ์ฌ์ฉํด๋ ์์น๋ฅผ ๊ณ ์ ํ ์ ์์๊ณ , margin
์ hardํ๊ฒ ์ ์ฉํ๊ณ ์ถ์ง๋ ์์๋ค.
๋ฐ๋ผ์ flexbox์ ๋ํ ํ์ต์ ์งํ ํ ํ, justify-content: space-between;
๋ฅผ ์ ์ฉํ์๋๋ ์ ์ฝ๊ฒ ํด๊ฒฐ๋์๋ค.
display: flex
& justify-content: space-between
์ ์ฉ. ๊ธฐ๋ณธ์ผ๋ก flex-direction
์ด row์ด๊ธฐ ๋๋ฌธ์ ์ข์ธก ์ ๋ ฌ์ด ๋๋ค.align-items: center
flex item์ cross axis๋ฅผ ๊ธฐ์ค์ผ๋ก center์ ๋๋ค. ๊ธฐ๋ณธ์ผ๋ก flex-direction
์ด row์ด๊ธฐ ๋๋ฌธ์ flex item์ ๋์ด๊ฐ container๋์ด๋งํผ ๋์ด๋ ์ค์์ ๋ ฌ์ด ๋์๋ค. (container์ height์ง์ ์ ์ ํ์!)
4๊ฐ์ article์ด ์์์ ์๋์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ๋ ์ ์๋๋ก ์ฌ์ฉํ๋ค.
๋ฐ์ํ์ ์ํด max-width๋ฅผ ์ฌ์ฉํ๋ค. ์ฌ์ค ๋๋จธ์ง ํํธ๊ฐ ๋ฐ์ํ์ด ์๋๋ผ ์๋ฏธ๋ ์์ง๋ง..!
์ฒ์์ ๊ต์ฅํ ๋นํฉํ๋ค. ์ด๋ค ๋ฐฉ๋ฒ์ ์จ๋ margin์๋ ์ ์ฉ๋์ง ์์๋ค. ํนํ h1, h2 ๊ฐ์ ํ๊ทธ๋ ์ด๋ฏธ margin์ด ์ ์ฉ๋์ด์๋ ๊ฒ์ธ์ง, ์ ์ฉ๋์ง ์๋ ๋ถ๋ถ์ด ์๊ฒจ ๊ผญ margin: 0์ ์ ์ฉํด์ค์ผํ๋ค.
๋๋์ด ์ผ์์ผ!