์์ด์ดํ๋ ์์ ์ง๋๋ฐ ์์์ ๋์์๋๊ฑด row ํํ๋ก ๊ทธ๋ฃน์ด ์ง์ด์ ธ์์๋๋ฐ
(ex. AC, <-,
, 7, 8, 9, +
, 4, 5, 6 -
, ...)
ํ์ด๋ถ์ด๋ ๋๋ ๋ญ๊ฐ ์ฑ๊ฒฉ์ ๋ง๊ฒ ๊ทธ๋ฃน์ ์ง๊ณ ์ถ์๋ค.
๊ทธ๋์ ์๊ฐํ ๊ทธ๋ฃน์ด ๋ณด์ฌ์ฃผ๋ ์์ญ๊ณผ ๋ฒํผ์์ญ์ ๋๋๊ณ
๋ฒํผ ์์ญ์ ์ง์ฐ๋ ์์ญ
, ์ซ์ ์์ญ
, ์ฐ์ฐ์ ์์ญ
์ด๋ ๊ฒ ๋๋ด๋ค.
๊ทธ๋ฐ๋ฐ flex ๋ก 1์์ฒ๋ผ ์ ๋ ฌ์ด ๊ฐ๋ฅํ ๊น..? ํ๋ ์๊ฐ์ด ๋ค์ด์
2์์ div ๋ฅผ ํ๋ฒ ๋ ๋ฌถ๋ ๋ฒ์ ์ ์๊ฐํด๋
์ต์ ์ ๋คํด๋ณด๊ณ ์๋๋ฉด 2์์ผ๋ก ๊ฐ์... ๋ผ๋ ์๊ฐ์ด์๋๋ฐ
์์ด์ดํ๋ ์๋ ๋ฏธ๋ฆฌ class ์ด๋ฆ๊ณผ div ๊ทธ๋ฃน์ ์ ํ๋๋
HTML์ ๋๋ฑ์ด์๋ค.
์ฐ์ ๊ณ์ฐ๊ธฐ๊ฐ ํ๋ฉด์์ ๊ฐ์ด๋ฐ ๋ฐฐ์น๋๊ฒ
body
์ display:flex
์ justify-content, align-items:center
๋ฅผ ์ฃผ๊ณ , height์ 100vh
์ฃผ๊ธฐ
์ด์ ์ฐ๊ณ์ฐ๊ธฐ ์์์ด๋ค.
.calculator
display
์ btn
์ ๋ถ๋ชจ์ธ calculator
์ display:flex
๋ฅผ ์ฃผ๊ณ ๊ณ ์ ๊ฐ์ ๊ฐ์ง๊ฒ height
์ width
๋ฅผ ์ง์ , ์ธ๋ก ์ ๋ ฌ์ด๋ผ direction:column
์ผ๋ก ์ฃผ๊ณ align-items: stretch
๋ฃ์ด์ ๊ธธ๊ฒ ๋์ด์ง๊ฒ ์ค์ ..display
<p>
์ถ๊ฐdisplay:flex
๋ฃ์ด์ฃผ๊ณ flex-direction:column; justify-content:flex-end;
flex-basis
๋ ๊ธฐ๋ณธ๊ฐ์ธ 35%๋ฅผ ์ก์๋ค.(์์ .calculator์์ column์ผ๋ก ์ค์ ํ๊ธฐ๋๋ฌธ์ basis๊ฐ width ๊ฐ ์๋ height๋ก ์ ์ฉ๋๋ ๊ฒ ๊ฐ๋ค).btn
flex-grow:1
์ ๋ฃ์ด์ฃผ๊ณ ์์์์์ clear ์ number, symbol ์ด ๋ค์ด๊ฐ๊ธฐ๋๋ฌธ์ display:flex
๋ฅผ ๋ฃ์ด์ค๋ค.flex-direction:colum
๊ณผ ์ค๋ฐ๊ฟ ๋๊ฒ ํ๊ธฐ ์ํด wrap
๋ ์ถ๊ฐ (๐์ฌ๊ธฐ์ ์ํ์ฐฉ์ค ์์-1).clear, .number
์ width ๋ 75%symbol
์ด ์์ ๋๋ํ ๋ถ์ ์ ์๋ค..clear
์ ์์ ์์์ธ AC ์ โ ๋ฒํผ์ ์ ๋ ฌ ํด์ฃผ๊ธฐ ์ํด display:flex
๋ฅผ ๋ฃ๊ณ , .btn
์์ญ์ ๋์ด๋ฅผ 100์ผ๋ก ๋ดค์๋ .clear ์์ญ์ 20๋ง ๋จน๊ธฐ ๋๋ฌธ์ flex-basis:20%
๋ฅผ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ถ๊ฐํด์ค๋ค.(๋ฒํผ์ row ๋ ์ด 5์ค์ด๋๊น 100/5=20)).number
์ ์์ ์์๋ค์ ์ ๋ ฌํ๊ธฐ ์ํด display:flex
๋ฅผ, ๋ฐ์์๋ถํฐ ์์ํ๊ธฐ ์ํด flex-wrap: wrap-reverse
๋ฅผ ์ถ๊ฐํด์ฃผ๊ณ ๋จ์ ๊ณต๊ฐ์ .number
๊ฐ ๋ค ๋จน๊ฒ ํ๊ธฐ ์ํด flex-grow:1
์ ์ถ๊ฐํด์ค๋ค..symbol
์ width: 25%
๋ฅผ ์ถ๊ฐ (.clear, .number
๊ฐ ์ฐจ์งํ๊ณ ๋จ์)height
๋ ์ ์ฒด๋ฅผ ๋ค ๋จน๊ฒํ๊ธฐ ์ํด 100%๋ฅผ ๋ฃ์ด์ค๋ค. ์์์์์ button ๋ค์ ์ ๋ ฌ์ ์ํด display:flex
์ ์ธ๋ก ์ ๋ ฌ์ ์ํด flex-direction: colum
์ ์ถ๊ฐํ๋ค..number
์ ์์์ธ div
๋ค์ ์ ๋ถ ์ ํํ๊ธฐ ์ํด .number > div
๋ฅผ ์ ๊ณ (์ด์ฐจํผ ๋ค๋ฅธ ์ ๋ค์ button ์ผ๋ก ์ฒ๋ฆฌ ๋์ด ์์ด์ ์๊ด ์์ใ
) ๊ฐ div ๋ค์ด full ๋ก ์ฐจ๊ฒํ๊ธฐ ์ํด width: 100%
๋ฅผ ์ ์ด์ฃผ๊ณ , div ์์ ์์ ์์๋ค์ ์ ๋ ฌ์ ์ํด display:flex
๋ฅผ ์ถ๊ฐbutton
๋ค์ด ๋จ์ ๊ณต๊ฐ์ 1์ฉ ๊ฐ์ง๊ฒ ํ๊ธฐ ์ํด flex-grow:1
์ ์ถ๊ฐ (๐์ฌ๊ธฐ์ ์ํ์ฐฉ์ค ์์-3) button ์ ํ
์คํธ๋ค์ด ๊ฐ๋ก ์ธ๋ก ์ผํฐ์ ๋ฐฐ์น๋๊ฒ ํ๊ธฐ ์ํด display:flex
๋ฅผ ์ถ๊ฐํด์ฃผ๊ณ align-items: center; justify-content: center
์ถ๊ฐAC
์ 0
๋ฒํผ์ ๋ค๋ฅธ ๋ฒํผ๋ค๋ณด๋ค ๊ธธ์ด๊ฐ 2๋ฐฐ์ด๋ HTML์ ํด๋น button
ํ๊ทธ์ grow
๋ผ๋ ํด๋์ค๋ฅผ ์ถ๊ฐ ํ CSS ์ button.grow
๋ก flex-grow:2
์ถ๊ฐbackground
๋ font-size
, color
๋ฑ์ ์ ๋ฆฌํด์ฃผ๊ธฐํ์ด๋ถ์ด๋ HTML์ ๋ชจ๋ ์์ฑํ๊ณ , CSS์ flex๋ง ์ ๋ฆฌ ํ ์ค์ ์ฝ๋๋ฅผ ๋ฃ์ด๋ดค๋๋ฐ
์ฌ๊ฑธ,, flex
๊ฐ ์ ๋๋ก ์๋ํ์ง ์์๋ฐ..
์ฐ์ ์๊ฐ์ด ๋ค๋ผ์ ๊ฐ์ ์ข ๋ ๊ณต๋ถํด๋ณด๊ณ ์ฃผ๋ง์ ๋ง๋์ ์์
ํ๊ธฐ๋ก ํ๊ณ
ํผ์ ์ ๋ง ๋ป์ง๋คํ๋ฉด์ ์ด๋ฐ ์ ๋ฐ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์๋ค
(์ค๊ฐ์ ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ถ๊ป๋ ์ฌ์ญค๋ณด๊ณ ใ
ใ
กใ
.. ๊ทธ๋ฐ๋ฐ flex
๋ณด๋ค grid
๋ฅผ ์ถ์ฒํด์ฃผ์
์ ์ค grid๋ ๊ณต๋ถํด๋ด์ผ์ง
์๊ฐํจใ
ใ
ใ
ใ
๊ฐํ์๋๐งก)
.btn
์ ์๋ฌด๋ฆฌํด๋ ๋ฒํผ๋ค์ด ์ค๋ฐ๊ฟ
ํ์ง ์์์ ๋ญ์ง๋ญ์ง ํ๋๋ฐ flex-wrap
์ด ์๋๋ผ direction
์ด์๋ค...ใ
..๋ .btn
์์ clear, number, symbol
์ ๋ฐฐ์นํ๋๋ฐ ์๊พธ symbol์ด ์์ผ๋ก ๊ฐ์ง ์๊ณ ๋ฐ์ผ๋ก ๋จ์ด์ ธ์ ์ ๊ทธ๋ฌ์ง๋ฅผ ๋ฐ๋ณต๐ฅบ.. wrap
๋ ์คฌ๋๋ฐ ํ๊ณ ์๊ฐํ๋ค๋ณด๋ calculator ์ ๋ถ๋ชจ ์์์ธ .btn๊ณผ .display ์ ๋์ด๊ฐ
๋ค์ ์ ๋๋ก ์ง์ ํด์ฃผ์ง ์์๋๋ผ.. basis
์ grow
, ๊ทธ๋ฆฌ๊ณ .clear, .number, .symbol ์ width %
๋ฑ์ ์๋ชฉ์กฐ๋ชฉ ์ ์จ๋ณด๋ ํผ์ฆ์ฒ๋ผ ์๋ง๊ฒ ์ ๋ค์ด๊ฐ๋ค.
.number
์์ button ๋ค์ ๋งจ ์๋์ค์๋ 0
๊ณผ .
๋ง ๋ฃ๊ณ ์ถ์๋ฐ
1
์ ์๊พธ ๋์น์์ด ์์ ๋ถ๋...
๊ทธ๋์ ๊ฑฐ๊พธ๋ก ์จ๋ณด๋ ์ ๋ง๋๊ฑฐ ๊ฐ์๋๋ฐ ์ซ์ ์์น๊ฐ ์ด์ํ๋คใ
ใ
ใ
๊ฒฐ๊ตญ .number
์์ button ๋ค์ row๋ณ๋ก ๋ฌถ์ด์ค์ ๋ฐฐ์น
ํจ.. ๋ญ๊ฐ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ด ์์ ๊ฒ ๊ฐ์๋ฐ ์ด๊ฑด ์ข ๋ ์๊ฐํด๋ด์ผ ๋ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ ๋ค.
0
๊ณผ AC
๋ฒํผ์ ๋๊ฐ์ด grow:2
๋ฅผ ์คฌ๋๋ฐ width
๊ฐ ๋ฌ๋ผ์ ๋๋์ฒด ๋ญ๊ฐ ๋ฌธ์ ๊ธฐ ํ๋๋ ๊ฐ์ ์ค์ ์๋ .
๊ณผ โ
์์ ๋ฌธ์ ๊ธธ์ด๊ฐ ๋ฌ๋ผ ๋จ๋ ๊ณต๊ฐ์ด ๋ฌ๋ผ์ง๋ฉด์ ์ฌ์ด์ฆ๊ฐ ๋ฌ๋ผ์ง๋๋ผ.. ๊ทธ๋์ button์ flex-basis ๊ฐ์ 0.9
๋ก ํ๋๊น ๋๊ฐ์์งใ
ใ
ใ
box-shadow
...๋๋ ์ด๋ ค์ด ๊ฒ..
๋ด๋ชจํผ์ฆ ๋ฒํผ์ ๋ง๋๋๋ฐ ํ์๋ฐฐ๊ฒฝ์ ํ์๋ฒํผ์ ์ฝ์ง๋ง ํ์๋ฐฐ๊ฒฝ์ ์๊น๋ฒํผ์ ๋ด๋ชจํผ์ฆ ์ ์ฉ.. ๋๋ฌด ์ด๋ ต๋ค๐ญ๐ญ ์ด๊ฑฐ๋ hover
๋ฅผ ํ๋ฉด์ ๋ ์ฐ์ต์ ํด๋ด์ผ ๋ ๊ฒ ๊ฐ๋ค.
๊ณ์ ํ๋ค๋ณด๋ฉด x์ถ y์ถ blur
์ ๋ํด ์ ์๋์ง ์์๊น..?
์ฌ๋ฌ๋ฒ์ ์ํ์ฐฉ์ค๊ฐ ์์์ง๋ง,,
(.number ์์ญ์ 0์ด ์ ์ ๋ฆฌ๋์ง์์์ ๊ฒฐ๊ตญ row๋ผ๋ฆฌ ๋ฌถ์..๐ฅบ)
๊ตฌ ๊ฐ์ ์์์ ๋ง๋๋๋ฐ ์ฑ๊ณตํ๋ค!
์ฒซ๋ฒ์งธ ๊ณ์ฐ๊ธฐ๋ ๋นํธ์ค์ ์๋ ๋์์ธ์์ ์ปฌ๋ฌ๋ง ๋ณ๊ฒฝํ ์ ๋ใ
(๋์์ธ๋งํฌ)