[TIL๐Ÿ”ฅ] Day21(9/6)

dasssseulยท2021๋…„ 9์›” 7์ผ
0

Today I Learned

๋ชฉ๋ก ๋ณด๊ธฐ
17/22
post-thumbnail

Introduction

์˜ค๋Š˜์€ ๋ฐ”๋‹๋ผ JS์—์„œ ์ž ์‹œ ๋ฒ—์–ด๋‚˜ 7์ฃผ์ฐจ์— ์˜ˆ์ •๋˜์–ด์žˆ๋˜ CSS์‹ฌํ™” ๊ฐ•์˜๋ฅผ ๋ง›๋ณด๊ธฐ๋กœ ๋“ค์—ˆ๋‹ค. CSS์— ๋Œ€ํ•ด์„œ๋Š” ๋‚˜๋ฆ„ ์ž˜ ์•Œ๊ณ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ๊ฐ ์†์„ฑ์ด ๊ฐ€์ง„ ์ƒˆ๋กœ์šด ํŠน์ง•๋“ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.
CSS๋„ ๋”ฐ๋กœ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋งŒ๋“ค์–ด ์ •๋ฆฌํ•ด์•ผ๊ฒ ๋‹ค.


์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ

CSS ์‹ฌํ™”
- Float
- Position
- Flex
- Grid

float์™€ position ์†์„ฑ์€ TIL์„ ํ†ตํ•ด ์ •๋ฆฌํ•˜๊ณ , flex์™€ grid๋Š” ์•„ํ‹ฐํด์„ ํ†ตํ•ด ์ •๋ฆฌํ•  ์˜ˆ์ •์ด๋‹ค.

๐ŸŒŠ Float

float๋ž€?

  • ํ•œ ์š”์†Œ๊ฐ€ ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ ํ๋ฆ„์—์„œ ๋ฒ—์–ด๋‚˜ ์š”์†Œ์˜ ๋ชจ์„œ๋ฆฌ๊ฐ€ ํŽ˜์ด์ง€์˜ ์™ผ์ชฝ์ด๋‚˜ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ
  • ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ๊ณ ์ •์‹œํ‚ค๋Š” position ํ”„๋กœํผํ‹ฐ์˜ absolute๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.

float์˜ ํ”„๋กœํผํ‹ฐ ๊ฐ’

  • left, right, none

float์˜ ์‚ฌ์šฉ

  • float์„ ์‚ฌ์šฉํ•˜๋Š” item๋“ค๊ณผ ์‚ฌ์šฉํ•˜์ง€์•Š๋Š” item์„ ํ•˜๋‚˜์˜ ๋ถ€๋ชจ ์š”์†Œ๋กœ ๋ฌถ๊ฒŒ ๋˜๋ฉด ๋ ˆ์ด์•„์›ƒ ์ƒ์— ๋ฌธ์ œ ๋ฐœ์ƒ
  • clearfix::after : ๊ฐ€์ƒ ์š”์†Œ๋กœ float ์†์„ฑ ํ•ด์ œ
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
<div class="container clearfix">
  <div class="item float">1</div>
  <div class="item float">2</div>
  <div class="item float">3</div>
  <div class="item">4</div>
</div>
  • ์œ„์˜ ์ฝ”๋“œ ์‹คํ–‰ ๊ฒฐ๊ณผ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ ๋ฐœ์ƒ

  • ํ•ด๊ฒฐ์ฑ…) div๋กœ ๋”ฐ๋กœ ๋ฌถ์–ด ๋ถ„๋ฆฌํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ธฐ

<div class="container">
  <div class="clearfix">
    <div class="item float">1</div>
    <div class="item float">2</div>
    <div class="item float">3</div>
  </div>
  <div class="item">4</div>
</div>

  • float ์€ ๋ธ”๋ก ๋ ˆ์ด์•„์›ƒ์˜ ์‚ฌ์šฉ์„ ๋œปํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ์ผ๋ถ€ ๊ฒฝ์šฐ์— display ๊ฐ’์˜ ๊ณ„์‚ฐ ๊ฐ’์„ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค.
    float๋ผ๋Š” ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋”๋ผ๋„ flex๋‚˜ grid ์†์„ฑ์„ ๊ฐ€์ง„ ์š”์†Œ์—์„œ๋Š” ํšจ๊ณผ ์—†์Œ


๐Ÿ—‚ Position

position์ด๋ž€?

  • ๋ฌธ์„œ ์ƒ์— ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ• ์ง€์ •

position์˜ ํ”„๋กœํผํ‹ฐ ๊ฐ’

  • static : ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜
  • relative : ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜, ์ž๊ธฐ ์ž์‹ ์„ ๊ธฐ์ค€์œผ๋กœ top, right, bottom, left ๊ฐ’์— ๋”ฐ๋ผ ์˜คํ”„์…‹ ์ ์šฉ
  • absolute: ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์—์„œ ์ œ๊ฑฐ, ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์œ„์น˜ ์ง€์ •(position: relative)์กฐ์ƒ ์š”์†Œ์— ๋Œ€ํ•ด ์ƒ๋Œ€์ ์œผ๋กœ ๋ฐฐ์น˜
    • ์กฐ์ƒ ์ค‘ ์œ„์น˜ ์ง€์ • ์š”์†Œ๊ฐ€ ์—†๋‹ค๋ฉด ๋ทฐํฌํŠธ์˜ ์ดˆ๊ธฐ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜
  • fixed: ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์—์„œ ์ œ๊ฑฐ, ๋ทฐํฌํŠธ์˜ ์ดˆ๊ธฐ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜
    • ๋‹จ, ์š”์†Œ์˜ ์กฐ์ƒ ์ค‘ ํ•˜๋‚˜๊ฐ€ transform, perspective, filter ์†์„ฑ ์ค‘ ์–ด๋Š ํ•˜๋‚˜๋ผ๋„ none์ด ์•„๋‹ˆํ•˜๋ฉด ๋ทฐํฌํŠธ ๋Œ€์‹  ๊ทธ ์กฐ์ƒ์„ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์œผ๋กœ ์‚ผ์Œ
  • absolute์™€ fixed๋ฅผ ๊ฐ€์ง„ ์š”์†Œ๋Š” ์ž๋™์œผ๋กœ display๊ฐ€ block์œผ๋กœ ๋ฐ”๋€œ

์Œ“์ž„ ๋งฅ๋ฝ(Stacking Context)

  • ํŠน์ • ์š”์†Œ์˜ ๋ Œ๋”๋ง ์ˆœ์„œ๋Š” ์ž์‹ ์˜ z-index ์†์„ฑ ๊ฐ’์— ์˜ํ–ฅ์„ ๋ฐ›์Œ

z-index

  • ๋จผ์ € position์„ ์ง€์ •ํ•˜๊ณ  z-index ์†์„ฑ ์ง€์ •
  • static์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ position์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ํ•˜๋‚˜์˜ ์ •์ˆ˜ ๊ฐ’์„ ๊ฐ€์ง (์–‘์ˆ˜, ์Œ์ˆ˜ ๋ชจ๋‘ ์‚ฌ์šฉ ๊ฐ€๋Šฅ)
  • ๋†’์€ ์ˆ˜๋ฅผ ๊ฐ€์ง„ ๋ ˆ์ด์–ด๋Š” ๋‚ฎ์€ ์ˆ˜๋ฅผ ๊ฐ€์ง„ ๋ ˆ์ด์–ด ์œ„์— ๋ Œ๋”๋ง


Comment

๋…ธ์…˜๋งŒ ๊ณ„์† ๋“ค์—ฌ๋‹ค๋ณด๋‹ค๊ฐ€ ์ฝ”๋“œํŽœ์œผ๋กœ css์‹ค์Šตํ•˜๋‹ˆ๊นŒ ๋ญ”๊ฐ€ ๋ฆฌํ”„๋ ˆ์‰ฌํ•œ ๊ธฐ๋ถ„์ด๋‹ค...
๊ทผ๋ฐ ๋˜ flex๋ž‘ grid ๋ฐฐ์šฐ๋ฉด์„œ ์‚ด์ง ํ—ท๊ฐˆ๋ฆฌ๊ธดํ–ˆ๋‹ค ใ…Žใ…Ž
์„ธ์ƒ์— ์‰ฌ์šด ๊ฒƒ์ด ์—†๋‹ค. ๊ทธ๋ž˜์„œ ์ธ์ƒ์ด ์žฌ๋ฏธ์žˆ๋Š” ๋ฒ•~~~๐Ÿ‘ป
css ๋งˆ์Šคํ„ฐํ•ด์„œ TodoApp์ด๋ž‘ Notion์— ๋‹ค์‹œ ์ ์šฉํ•ด๋ด์•ผ๊ฒ ๋‹ค.


์ฐธ๊ณ  ์‚ฌ์ดํŠธ

profile
์ธ์ƒ์€ ์šฉ๊ธฐ์˜ ์–‘์— ๋”ฐ๋ผ ์ค„์–ด๋“ค๊ฑฐ๋‚˜, ๋Š˜์–ด๋‚œ๋‹ค

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