๐Ÿ ๊ณ„์‚ฐ๊ธฐ ๋งŒ๋“ค๊ธฐ(1/3)

moonoยท2022๋…„ 12์›” 24์ผ
0

๊ณผ์ œ

๋ชฉ๋ก ๋ณด๊ธฐ
1/6
post-thumbnail

๐Ÿ ๊ณ„์‚ฐ๊ธฐ ๋งŒ๋“ค๊ธฐ(1)-๋ชฉ์—…

  • HTML ๊ณผ CSS๋กœ ๊ณ„์‚ฐ๊ธฐ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑ
  • flex ์ด์šฉํ•ด์„œ ๋งŒ๋“ค๊ธฐ

์™€์ด์–ดํ”„๋ ˆ์ž„

์™€์ด์–ดํ”„๋ ˆ์ž„์„ ์งœ๋Š”๋ฐ ์˜ˆ์‹œ์— ๋‚˜์™€์žˆ๋Š”๊ฑด row ํ˜•ํƒœ๋กœ ๊ทธ๋ฃน์ด ์ง€์–ด์ ธ์žˆ์—ˆ๋Š”๋ฐ
(ex. AC, <-, , 7, 8, 9, + , 4, 5, 6 -, ...)

ํŽ˜์–ด๋ถ„์ด๋ž‘ ๋‚˜๋Š” ๋ญ”๊ฐ€ ์„ฑ๊ฒฉ์— ๋งž๊ฒŒ ๊ทธ๋ฃน์„ ์ง“๊ณ ์‹ถ์—ˆ๋‹ค.
๊ทธ๋ž˜์„œ ์ƒ๊ฐํ•œ ๊ทธ๋ฃน์ด ๋ณด์—ฌ์ฃผ๋Š” ์˜์—ญ๊ณผ ๋ฒ„ํŠผ์˜์—ญ์„ ๋‚˜๋ˆ„๊ณ 
๋ฒ„ํŠผ ์˜์—ญ์— ์ง€์šฐ๋Š” ์˜์—ญ , ์ˆซ์ž ์˜์—ญ , ์—ฐ์‚ฐ์ž ์˜์—ญ ์ด๋ ‡๊ฒŒ ๋‚˜๋ˆด๋‹ค.

๊ทธ๋Ÿฐ๋ฐ flex ๋กœ 1์•ˆ์ฒ˜๋Ÿผ ์ •๋ ฌ์ด ๊ฐ€๋Šฅํ• ๊นŒ..? ํ•˜๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์„œ
2์•ˆ์— div ๋ฅผ ํ•œ๋ฒˆ ๋” ๋ฌถ๋Š” ๋ฒ„์ „์„ ์ƒ๊ฐํ•ด๋‘ 
์ตœ์„ ์„ ๋‹คํ•ด๋ณด๊ณ  ์•ˆ๋˜๋ฉด 2์•ˆ์œผ๋กœ ๊ฐ€์ž... ๋ผ๋Š” ์ƒ๊ฐ์ด์˜€๋Š”๋ฐ



flex ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

์™€์ด์–ดํ”„๋ ˆ์ž„๋•Œ ๋ฏธ๋ฆฌ 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
    ์ฒ˜์Œ์—๋Š” 0๋งŒ ๋ณด์ด๊ฒŒ ํ•˜๋ ค๋‹ค ๊ณผ์ •๊ณผ ๊ฒฐ๊ณผ๋ฅผ ๋„ฃ์œผ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์„œ <p> ์ถ”๊ฐ€
    ๊ทธ๋ž˜์„œ ์–˜๋„ p ๋“ค์˜ ๋ถ€๋ชจ๋‹ˆ๊นŒ display:flex ๋„ฃ์–ด์ฃผ๊ณ 
    p ๋“ค์ด ์„ธ๋กœ์ •๋ ฌ์— ์•„๋ž˜์—์„œ ๋ถ€ํ„ฐ ๋ณด์—ฌ์งˆ๊ฑฐ๋‹ˆ๊นŒ flex-direction:column; justify-content:flex-end;
    ๊ทธ๋ฆฌ๊ณ  ๋ฐ‘์— ๋ฐฐ์น˜๋œ btn ์˜ grow๊ฐ’์„ 1๋กœ ์ •ํ•  ๊ณ„ํš์ด๊ธฐ ๋•Œ๋ฌธ์—
    ์–˜์˜ 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%
    ์ด๋ ‡๊ฒŒ width ๋ฅผ ์ง€์ •ํ•ด ์ค˜์•ผ 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 ์„ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.
    (๐Ÿ“์—ฌ๊ธฐ์„œ ์‹œํ–‰์ฐฉ์˜ค ์žˆ์Œ-2)
  • .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 ๋“ฑ์„ ์ •๋ฆฌํ•ด์ฃผ๊ธฐ
    (๐Ÿ“์—ฌ๊ธฐ์„œ ์‹œํ–‰์ฐฉ์˜ค ์žˆ์Œ-4)




์‹œํ–‰์ฐฉ์˜ค

ํŽ˜์–ด๋ถ„์ด๋ž‘ HTML์„ ๋ชจ๋‘ ์ž‘์„ฑํ•˜๊ณ , CSS์— flex๋งŒ ์ •๋ฆฌ ํ›„ ์‹ค์ œ ์ฝ”๋“œ๋ฅผ ๋„ฃ์–ด๋ดค๋Š”๋ฐ
์›ฌ๊ฑธ,, flex๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๋”ฐ..
์šฐ์„  ์‹œ๊ฐ„์ด ๋‹ค๋ผ์„œ ๊ฐ์ž ์ข€ ๋” ๊ณต๋ถ€ํ•ด๋ณด๊ณ  ์ฃผ๋ง์— ๋งŒ๋‚˜์„œ ์ž‘์—…ํ•˜๊ธฐ๋กœ ํ•˜๊ณ 
ํ˜ผ์ž ์ •๋ง ๋ป˜์ง“๋‹คํ•˜๋ฉด์„œ ์ด๋Ÿฐ ์ €๋Ÿฐ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์—ˆ๋‹ค
(์ค‘๊ฐ„์— ์•„๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ถ„๊ป˜๋„ ์—ฌ์ญค๋ณด๊ณ ใ… ใ…กใ… .. ๊ทธ๋Ÿฐ๋ฐ flex๋ณด๋‹ค grid๋ฅผ ์ถ”์ฒœํ•ด์ฃผ์…”์„œ ์˜ค grid๋„ ๊ณต๋ถ€ํ•ด๋ด์•ผ์ง€ ์ƒ๊ฐํ•จใ…‹ใ…‹ใ…‹ใ…‹๊ฐ“ํ•˜์€๋‹˜๐Ÿงก)

๐Ÿ“ ์‹œํ–‰์ฐฉ์˜ค-01

.btn ์— ์•„๋ฌด๋ฆฌํ•ด๋„ ๋ฒ„ํŠผ๋“ค์ด ์ค„๋ฐ”๊ฟˆ ํ•˜์ง€ ์•Š์•„์„œ ๋ญ์ง€๋ญ์ง€ ํ–ˆ๋Š”๋ฐ flex-wrap์ด ์•„๋‹ˆ๋ผ direction ์ด์˜€๋‹ค...ใ…Ž..๋˜ .btn ์•ˆ์— clear, number, symbol ์„ ๋ฐฐ์น˜ํ•˜๋Š”๋ฐ ์ž๊พธ symbol์ด ์˜†์œผ๋กœ ๊ฐ€์ง€ ์•Š๊ณ  ๋ฐ‘์œผ๋กœ ๋–จ์–ด์ ธ์„œ ์™œ ๊ทธ๋Ÿฌ์ง€๋ฅผ ๋ฐ˜๋ณต๐Ÿฅบ.. wrap ๋„ ์คฌ๋Š”๋ฐ ํ•˜๊ณ  ์ƒ๊ฐํ•˜๋‹ค๋ณด๋‹ˆ calculator ์™€ ๋ถ€๋ชจ ์š”์†Œ์ธ .btn๊ณผ .display ์— ๋†’์ด๊ฐ’ ๋“ค์„ ์ œ๋Œ€๋กœ ์ง€์ •ํ•ด์ฃผ์ง€ ์•Š์•˜๋”๋ผ.. basis ์™€ grow , ๊ทธ๋ฆฌ๊ณ  .clear, .number, .symbol ์— width % ๋“ฑ์„ ์š”๋ชฉ์กฐ๋ชฉ ์ž˜ ์จ๋ณด๋‹ˆ ํผ์ฆ์ฒ˜๋Ÿผ ์•Œ๋งž๊ฒŒ ์ž˜ ๋“ค์–ด๊ฐ”๋‹ค.

๐Ÿ“ ์‹œํ–‰์ฐฉ์˜ค-02

.number ์•ˆ์˜ button ๋“ค์˜ ๋งจ ์•„๋ž˜์ค„์—๋Š” 0 ๊ณผ . ๋งŒ ๋„ฃ๊ณ  ์‹ถ์€๋ฐ
1 ์™œ ์ž๊พธ ๋ˆˆ์น˜์—†์ด ์˜†์— ๋ถ™๋‹ˆ...
๊ทธ๋ž˜์„œ ๊ฑฐ๊พธ๋กœ ์จ๋ณด๋‹ˆ ์ž˜ ๋งž๋Š”๊ฑฐ ๊ฐ™์•˜๋Š”๋ฐ ์ˆซ์ž ์œ„์น˜๊ฐ€ ์ด์ƒํ–ˆ๋‹คใ…‹ใ…‹ใ…‹
๊ฒฐ๊ตญ .number ์•ˆ์˜ button ๋“ค์„ row๋ณ„๋กœ ๋ฌถ์–ด์ค˜์„œ ๋ฐฐ์น˜ ํ•จ.. ๋ญ”๊ฐ€ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์€๋ฐ ์ด๊ฑด ์ข€ ๋” ์ƒ๊ฐํ•ด๋ด์•ผ ๋  ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค.

๐Ÿ“ ์‹œํ–‰์ฐฉ์˜ค-03

0 ๊ณผ AC ๋ฒ„ํŠผ์— ๋˜‘๊ฐ™์ด grow:2 ๋ฅผ ์คฌ๋Š”๋ฐ width ๊ฐ€ ๋‹ฌ๋ผ์„œ ๋„๋Œ€์ฒด ๋ญ๊ฐ€ ๋ฌธ์ œ๊ธฐ ํ–ˆ๋”๋‹ˆ ๊ฐ™์€ ์ค„์— ์žˆ๋Š” . ๊ณผ โ† ์–˜์˜ ๋ฌธ์ž ๊ธธ์ด๊ฐ€ ๋‹ฌ๋ผ ๋‚จ๋Š” ๊ณต๊ฐ„์ด ๋‹ฌ๋ผ์ง€๋ฉด์„œ ์‚ฌ์ด์ฆˆ๊ฐ€ ๋‹ฌ๋ผ์ง€๋”๋ผ.. ๊ทธ๋ž˜์„œ button์— flex-basis ๊ฐ’์„ 0.9 ๋กœ ํ•˜๋‹ˆ๊นŒ ๋˜‘๊ฐ™์•„์งใ…‹ใ…‹ใ…‹

๐Ÿ“ ์‹œํ–‰์ฐฉ์˜ค-04

box-shadow...๋„˜๋‚˜ ์–ด๋ ค์šด ๊ฒƒ..
๋‰ด๋ชจํ”ผ์ฆ˜ ๋ฒ„ํŠผ์„ ๋งŒ๋“œ๋Š”๋ฐ ํ•˜์–€๋ฐฐ๊ฒฝ์— ํ•˜์–€๋ฒ„ํŠผ์€ ์‰ฝ์ง€๋งŒ ํ•˜์–€๋ฐฐ๊ฒฝ์— ์ƒ‰๊น”๋ฒ„ํŠผ์— ๋‰ด๋ชจํ”ผ์ฆ˜ ์ ์šฉ.. ๋„ˆ๋ฌด ์–ด๋ ต๋‹ค๐Ÿ˜ญ๐Ÿ˜ญ ์ด๊ฑฐ๋Š” hover ๋ฅผ ํ•˜๋ฉด์„œ ๋” ์—ฐ์Šต์„ ํ•ด๋ด์•ผ ๋  ๊ฒƒ ๊ฐ™๋‹ค.
๊ณ„์† ํ•˜๋‹ค๋ณด๋ฉด x์ถ• y์ถ• blur ์— ๋Œ€ํ•ด ์ ์‘๋˜์ง€ ์•Š์„๊นŒ..?



๊ฒฐ๊ณผ๋Š” ๋Œ€์„ฑ๊ณต!!!

์—ฌ๋Ÿฌ๋ฒˆ์˜ ์‹œํ–‰์ฐฉ์˜ค๊ฐ€ ์žˆ์—ˆ์ง€๋งŒ,,
(.number ์˜์—ญ์— 0์ด ์ž˜ ์ •๋ฆฌ๋˜์ง€์•Š์•„์„œ ๊ฒฐ๊ตญ row๋ผ๋ฆฌ ๋ฌถ์Œ..๐Ÿฅบ)
๊ตฌ ๊ฐœ์˜ ์‹œ์•ˆ์„ ๋งŒ๋“œ๋Š”๋ฐ ์„ฑ๊ณตํ–ˆ๋‹ค!
์ฒซ๋ฒˆ์งธ ๊ณ„์‚ฐ๊ธฐ๋Š” ๋น„ํ•ธ์Šค์— ์žˆ๋Š” ๋””์ž์ธ์—์„œ ์ปฌ๋Ÿฌ๋งŒ ๋ณ€๊ฒฝํ•œ ์ •๋„ใ…Ž
(๋””์ž์ธ๋งํฌ)

0๊ฐœ์˜ ๋Œ“๊ธ€