Search
🎨

CSS: Layout, Box Model, Position, FlexBox

πŸ§‘πŸΌβ€πŸš€ Layoutλ₯Ό μ•Œμ•„μ•Ό ν•˜λŠ” 이유

β—ν™”λ©΄μ˜ ꡬ성을 μ›ν•˜λŠ” λŒ€λ‘œ λ°°μΉ˜ν•˜κ³  μ‹Άλ‹€λ©΄? β—μ›ΉνŽ˜μ΄μ§€μ—μ„œ κ°€μž₯ 많이 μ‚¬μš©λ˜λŠ” CSS 지식을 μš°μ„ μ μœΌλ‘œ μ•Œκ³  μ‹Άλ‹€λ©΄?

πŸ™‹πŸ»β€β™‚οΈ 이 λ¬Έμ„œλ₯Ό 보고 λ‚˜λ©΄

Box Model, Position, FlexBox에 λŒ€ν•΄μ„œ μ΄ν•΄ν•˜κ³ , λ ˆμ΄μ•„μ›ƒμ„ ꡬ성해볼 수 μžˆλ‹€.

λ ˆμ΄μ•„μ›ƒ

css ν”„λ‘œνΌν‹°λŠ” μ•½ 500κ°œκ°€ λ„˜μ„ μ •λ„λ‘œ ꡉμž₯히 λ°©λŒ€ν•©λ‹ˆλ‹€. κ·Έ css ν”„λ‘œνΌν‹°λ₯Ό μ²˜μŒλΆ€ν„° λͺ¨λ‘ μ•Œλ €κ³  ν•˜λ©΄ 끝이 없을 ν…λ°μš”. 뭐든지 μ–΄λ €μšΈ 수둝 μ „λž΅μ΄ ν•„μš”ν•©λ‹ˆλ‹€. 자주 μ‚¬μš©ν•˜λŠ” css ν”„λ‘œνΌν‹°λ“€μ΄ μ–΄λ–€ 것인지 μ•ˆλ‹€λ©΄ 훨씬 λͺ…확해지겠죠? https://chromestatus.com/metrics/css/popularity 이 λ§ν¬λŠ” ν¬λ‘¬μ—μ„œ μ œκ³΅ν•˜λŠ” ν¬λ‘¬μ—μ„œ 자주 μ‚¬μš©λ˜λŠ” css ν”„λ‘œνΌν‹° λž­ν‚Ήμ„ 보여주고 μžˆμŠ΅λ‹ˆλ‹€. κ°€μž₯ μƒμœ„μ— μžˆλŠ” 것듀은 λ ˆμ΄μ•„μ›ƒκ³Ό κ΄€λ ¨λœ κ°’μž…λ‹ˆλ‹€. λ ˆμ΄μ•„μ›ƒμ€ 맀우 μ€‘μš”ν•©λ‹ˆλ‹€. 이쁘게 κΎΈλ©°μ£ΌλŠ”κ±΄ μ—¬λŸ¬ λ””μžμΈ 라이브러리둜 κ°€λŠ₯ν•˜μ§€λ§Œ, λ ˆμ΄μ•„μ›ƒμ€ 직접 μž‘μ„±ν•΄μ•Ό ν•˜λŠ” κ²½μš°κ°€ 많기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

Box Model

λ ˆμ΄μ•„μ›ƒμ„ μ΄λ£¨λŠ” 2가지 κΈ°λ³Έ κ°œλ…μ€ 크기와 μœ„μΉ˜μž…λ‹ˆλ‹€. 이 크기λ₯Ό μ •ν•˜λŠ”λ° μ€‘μš”ν•œ κ°œλ…μ΄ Box Modelμž…λ‹ˆλ‹€. λͺ¨λ“  HTML의 elementλŠ” μ‚¬κ°ν˜• λ°•μŠ€μ˜ ν˜•νƒœλ₯Ό κ°€μ§‘λ‹ˆλ‹€. λ‹€μŒκ³Ό 같은 속성을 κ°€μ§‘λ‹ˆλ‹€.
μžλ™μ°¨ κ²½μ£Ό κ²Œμž„μ—μ„œλ„ μ—¬λŸ¬ 개의 λ°•μŠ€λ‘œ 이루어진 μ—˜λ¦¬λ¨ΌνŠΈκ°€ ꡬ성
보톡 cssμ—μ„œ box modelλ₯Ό λ‹€λ£° λ•Œ 고민이 λ˜λŠ” 지점은 λ°”λ‘œ κ²Ήμ³μ§€λŠ” λΆ€λΆ„μž…λ‹ˆλ‹€.

μΈμ ‘ν•œ 두 개의 block elementκ°€ μ„œλ‘œ λ‹€λ₯Έ margin을 가지고 μžˆλ‹€λ©΄?

큰 값을 가진 margin값이 κ³΅μœ λ˜μ–΄ μ‚¬μš©λ¨ 10px + 20px = 20px

μΈμ ‘ν•œ 두 개의 inline element의 margin은?

각각의 margin 의 ν•©μœΌλ‘œ ν‘œν˜„λœλ‹€. 10px + 20px = 30px

margin, padding의 λ‹€μ–‘ν•œ μΆ•μ•½ν‘œκΈ°λ²•

margin : 0px 0px 0px 10px; (top , right , bottom, left) margin : 10px; (λ„€κ°œμ˜ 뢄면이 λͺ¨λ‘ 10px) margin : 10px 15px; (top, bottom 은 10px , right, leftλŠ” 15px)
Plain Text
μ‹€μ œ λ ˆμ΄μ•„μ›ƒμ„ λ§Œλ“€ λ•Œ, 본인이 μ›ν•˜λŠ” λŒ€λ‘œ λ™μž‘ν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄, κΌ­ MDN을 톡해 ν•΄λ‹Ή 속성에 λŒ€ν•΄μ„œ ν•™μŠ΅ν•΄λ³΄κ³  λ„˜μ–΄κ°€μ£Όμ„Έμš”.

Position

position은 elementλ₯Ό μ–΄λ–»κ²Œ λ°°μΉ˜ν•  것인가λ₯Ό κ²°μ •ν•©λ‹ˆλ‹€. 크게 4κ°€μ§€μ˜ μƒνƒœκ°€ μžˆμŠ΅λ‹ˆλ‹€.
β€’
static
β€’
absolute
β€’
relative
β€’
fixed

1) static

λͺ¨λ“  element 의 default κ°’μž…λ‹ˆλ‹€. λ¬Έμ„œμ˜ νλ¦„λŒ€λ‘œ μœ„μΉ˜κ°€ κ²°μ •λ©λ‹ˆλ‹€.

2) relative

μ›λž˜ μœ„μΉ˜μ— μƒλŒ€μ μΈ μœ„μΉ˜
relative μ†μ„±μ˜ μ‹€μ œ μ‚¬μš©μ€, absolute속성을 가진 μžμ‹μ˜ κΈ°μ€€μ μœΌλ‘œ 더 많이 ν™œμš©λ©λ‹ˆλ‹€.

3) absolute

μ ˆλŒ€μ μΈ μœ„μΉ˜μ΄λ©° λ¬Έμ„œμ˜ νλ¦„μ—μ„œ μ œμ™Έ. 기쀀점은 μƒμœ„element 쀑 static 속성이 μ•„λ‹Œ element μœ„μΉ˜μ„€μ •μ€ top, bottom 쀑 ν•œ κ°œμ™€ left, right 쀑 ν•œκ°œλ₯Ό μ„ νƒν•΄μ„œ μ„€μ •

4) fixed

μ§„μ •ν•œ μ ˆλŒ€μ μΈ μœ„μΉ˜λ₯Ό 차지 λ¬Έμ„œμ˜ νλ¦„μ—μ„œ μ œμ™Έ. viewport(λ³΄μ΄λŠ” ν™”λ©΄)λ₯Ό κΈ°μ€€μœΌλ‘œ μœ„μΉ˜κ°’μ„ 가짐

Flex Box

λŒ€λΆ€λΆ„μ˜ μ›ΉνŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒ ꡬ성은 μœ„-μ•„λž˜μ˜ 수직 κ΅¬μ„±μž…λ‹ˆλ‹€. λ ˆμ΄μ•„μ›ƒμ„ ꡬ성할 λ•Œ κ°€μž₯ 많이 μ‚¬μš©ν•˜λŠ” μš”μ†Œλ“€μ΄ 기본적으둜 블둝 ν˜•νƒœλ‘œ ν‘œμ‹œλ˜λ©° μ΄λŠ” μœ„μ—μ„œ μ•„λž˜λ‘œ μŒ“μ΄κΈ° λ•Œλ¬Έμ— 수직 ꡬ성은 μƒλŒ€μ μœΌλ‘œ μ‰½κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μˆ˜ν‰κ΅¬μ„±μ˜ κ²½μš°λŠ” 상황이 쑰금 λ‹€λ¦…λ‹ˆλ‹€. λ¬Έμ œλŠ” μˆ˜ν‰ ꡬ쑰λ₯Ό λ§Œλ“œλŠ” 속성이 λͺ…ν™•ν•˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬ΈμΈλ°, κ·Έλž˜μ„œ λ§Žμ€ 경우 <table>λ‚˜ float ν˜Ήμ€ inline-block λ“±μ˜ 도움을 λ°›μ•˜μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ΄λŸ¬ν•œ 방법듀은 λŒ€λΆ€λΆ„ μˆ˜ν‰ λ ˆμ΄μ•„μ›ƒ κ΅¬μ„±μ˜ μ°¨μ„ μ±…μ΄μ—ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ λ§Žμ€ μ—”μ§€λ‹ˆμ–΄λ“€μ˜ 연ꡬ κ²°κ³Ό Flex(Flexible Box)λΌλŠ” λͺ…ν™•ν•œ κ°œλ…μ„ μ΄μš©ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒμ„ μ‰½κ²Œ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€.
μžλ™μ°¨ κ²½μ£Ό κ²Œμž„μ—μ„œ λ ˆμ΄μ•„μ›ƒ ꡬ성을 μœ„ν•΄ FlexBoxλ₯Ό μ‚¬μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
FlexλŠ” μš”μ†Œμ˜ 크기가 λΆˆλΆ„λͺ…ν•˜κ±°λ‚˜ 동적인 κ²½μš°μ—λ„, 각 μš”μ†Œλ₯Ό μ •λ ¬ν•  수 μžˆλŠ” 효율적인 방법을 μ œκ³΅ν•©λ‹ˆλ‹€. κ°€λŠ₯ν•˜λ©΄ ν™”λ©΄μ˜ ui을 μ„€μ •ν•  λ•Œ FlexBox둜 κ΅¬μ„±ν•˜λŠ” μ—°μŠ΅ ν•΄λ³΄μ‹œλŠ” 것을 μΆ”μ²œν•©λ‹ˆλ‹€. FlexBox에 λŒ€ν•œ 이해λ₯Ό 돕기 μœ„ν•œ μ„œλΉ„μŠ€λ„ μžˆμŠ΅λ‹ˆλ‹€.
μ‚¬μ΄νŠΈμ—μ„œ κ²Œμž„μ²˜λŸΌ flex layout에 λŒ€ν•΄ ν•™μŠ΅ν•΄λ³Ό 수 μžˆμ–΄μš”!

πŸ”— μ°Έκ³  링크

β€’