๐Ÿ’œ ์Šคํ”„๋ฆฐํŠธ FE 9๊ธฐ/weekly ํŽ˜์ดํผ ๐Ÿ“

๐Ÿ“Œ week(2) - ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ์ , position์˜ ์†์„ฑ๋“ค๊ณผ ๊ฐ๊ฐ์˜ ํŠน์ง•

yyezzzy 2024. 7. 12. 16:56

๐Ÿ™‹๐Ÿป‍โ™€๏ธ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ์ ์„ ์„ค๋ช…ํ•ด ์ฃผ์‹œ์˜ค.

๐Ÿ™‹๐Ÿป‍โ™€๏ธ position์˜ ์†์„ฑ๋“ค๊ณผ ๊ฐ๊ฐ์˜ ํŠน์ง•์„ ์„ค๋ช…ํ•ด ์ฃผ์‹œ์˜ค.

 


์‹œ๋งฅํ‹ฑ ํƒœ๊ทธ ์‚ฌ์šฉ์˜ ์ด์ 

  1. ํ–ฅ์ƒ๋œ ์ ‘๊ทผ์„ฑ - ํ–ฅ์ƒ๋œ ์ ‘๊ทผ์„ฑ์€ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์ด ์›น ์ฝ˜ํ…์ธ ์™€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋”์šฑ ์œ ์šฉํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ์˜๋ฏธ
    • ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ํ˜ธํ™˜์„ฑ
      • ์‹œ๊ฐ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•ด ํ™”๋ฉด ํŒ๋…๊ธฐ๋ฅผ ํ†ตํ•ด ๋‚ด์šฉ์„ ์†Œ๋ฆฌ๋‚ด์–ด ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
    • ํ‚ค๋ณด๋“œ ํƒ์ƒ‰
      • ์‚ฌ์šฉ์ž๊ฐ€ ํ‚ค๋ณด๋“œ๋งŒ์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์ดํŠธ๋ฅผ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ฉฐ, ์ด๋Š” ๋งˆ์šฐ์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
    • ๋ช…ํ™•ํ•˜๊ณ  ์„ค๋ช…์ ์ธ ์ฝ˜ํ…์ธ 
      • ์‚ฌ์šฉ์ž๊ฐ€ ์ฝ˜ํ…์ธ ์™€ ํƒ์ƒ‰ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ช…ํ™•ํ•œ ์ œ๋ชฉ, ๋ ˆ์ด๋ธ” ๋ฐ ์„ค๋ช…์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
    • ์ด๋ฏธ์ง€์šฉ ๋Œ€์ฒด ํ…์ŠคํŠธ
      • ์ด๋ฏธ์ง€๋ฅผ ๋ณผ ์ˆ˜ ์—†๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋™์ผํ•œ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ํ…์ŠคํŠธ ์„ค๋ช…์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
    • ๋Œ€๋น„ ๋ฐ ์ƒ‰์ƒ ์‚ฌ์šฉ
      • ์‹œ๊ฐ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ์šฉ์ž์˜ ๊ฐ€๋…์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ๊ณ ๋Œ€๋น„์™€ ์ ์ ˆํ•œ ์ƒ‰์ƒ ๊ตฌ์„ฑํ‘œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
    • ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํ…์ŠคํŠธ
      • ๋ ˆ์ด์•„์›ƒ์„ ๊นจ์ง€ ์•Š๊ณ  ํ…์ŠคํŠธ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์‹œ๊ฐ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.
  2. ๋” ๋‚˜์€ SEO
    • ๊ฒ€์ƒ‰ ์—”์ง„: ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋Š” ๊ฒ€์ƒ‰ ์—”์ง„์ด ์ฝ˜ํ…์ธ ์˜ ๊ตฌ์กฐ์™€ ์˜๋ฏธ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ํŽ˜์ด์ง€์˜ ๊ฒ€์ƒ‰ ์—”์ง„ ์ˆœ์œ„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ๋ฆฌ์น˜ ์Šค๋‹ˆํŽซ: ๋ฆฌ์น˜ ์Šค๋‹ˆํŽซ์„ ์‚ฌ์šฉํ•˜๊ณ  ๋” ๋‚˜์€ ์ƒ‰์ธ์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  3. ํ–ฅ์ƒ๋œ ์ฝ”๋“œ ๊ฐ€๋…์„ฑ
    • ๋ช…ํ™•์„ฑ: ์˜๋ฏธ ํƒœ๊ทธ๊ฐ€ ๋‹ค์–‘ํ•œ ์„น์…˜์˜ ๋ชฉ์ ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๋ฏ€๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ  ์ดํ•ดํ•˜๊ธฐ๊ฐ€ ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค.
    • ์œ ์ง€ ๊ด€๋ฆฌ: ๊ตฌ์กฐ์™€ ๋‚ด์šฉ์ด ๋” ๋ช…ํ™•ํ•ด์ง€๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๋ฅผ ์œ ์ง€ ๊ด€๋ฆฌํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜๊ธฐ๊ฐ€ ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค.
  4. ํ‘œ์ค€ํ™”
    • ์ผ๊ด€๋œ ๊ตฌ์กฐ: ์›น ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ํ‘œ์ค€ํ™”๋œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์žฅ๋ คํ•˜์—ฌ ๊ฐœ๋ฐœ์ž ๊ฐ„์˜ ๊ณต๋™ ์ž‘์—…์„ ๋”์šฑ ์›ํ™œํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
    • ๋ชจ๋ฒ” ์‚ฌ๋ก€: ์›น ๊ฐœ๋ฐœ์— ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.
  5. ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ
    • ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €: ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €๋Š” ์˜๋ฏธ ์ฒด๊ณ„ ํƒœ๊ทธ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ Œ๋”๋งํ•˜๋„๋ก ์ตœ์ ํ™”๋˜์–ด ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ์—์„œ ์ผ๊ด€๋œ ํ™˜๊ฒฝ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค

CSS์˜ ์œ„์น˜ ์†์„ฑ

CSS์—์„œ position ์†์„ฑ์€ ์š”์†Œ์— ์‚ฌ์šฉ๋˜๋Š” ์œ„์น˜ ์ง€์ • ๋ฐฉ๋ฒ• ์œ ํ˜•์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” `static`, `relative`, `absolute`, `fixed`, and `sticky`์˜ 5๊ฐ€์ง€ ๊ฐ’์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ๊ฐ์€ ๋šœ๋ ทํ•œ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค:

์œ„์น˜ ์ •ํ•˜๊ธฐ

์œ„์น˜๋ฅผ ์ •ํ•˜๋Š” ๊ธฐ์ค€์— ๋Œ€ํ•ด์„œ top, right, bottom, left ์†์„ฑ์œผ๋กœ ์œ„์น˜๋ฅผ ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ’์ด ๋ชจ๋‘ ๋˜‘๊ฐ™์€ ๊ฒฝ์šฐ inset ์†์„ฑ์„ ์”๋‹ˆ๋‹ค.

static ํฌ์ง€์…˜

  • ๊ธฐ๋ณธ ์œ„์น˜: ๊ธฐ๋ณธ๊ฐ’์ž…๋‹ˆ๋‹ค. ์š”์†Œ๋Š” ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค.
  • ์œ„์น˜ ์˜คํ”„์…‹ ์—†์Œ: top, right, bottom ๋ฐ left ์†์„ฑ์€ ํšจ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

relative ํฌ์ง€์…˜

์š”์†Œ์˜ ์›๋ž˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ์š”์†Œ์˜ ์›๋ž˜ ์ž๋ฆฌ๋Š” ๊ทธ๋Œ€๋กœ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ž์ฒด ๊ธฐ์ค€: ์š”์†Œ๊ฐ€ ์ผ๋ฐ˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. top, right, bottom ๋˜๋Š” left๋ฅผ ์„ค์ •ํ•˜๋ฉด ์›๋ž˜ ์œ„์น˜์—์„œ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ณต๊ฐ„ ์œ ์ง€: ๋ฌธ์„œ ํ๋ฆ„์—์„œ ์š”์†Œ์˜ ์›๋ž˜ ๊ณต๊ฐ„์ด ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

.green {
  position: relative;
  top: 15px;
  left: 10px;
}

absolute ํฌ์ง€์…˜

  • ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ํฌ์ง€์…”๋‹์ด ๋œ ์กฐ์ƒ ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค.
  • ์ด๋•Œ ํฌ์ง€์…”๋‹์ด ๋˜์—ˆ๋‹ค๋Š” ๊ฑด static์ด ์•„๋‹ˆ๋ผ๋Š” (position ์†์„ฑ์„ ์ง€์ •ํ–ˆ๋‹ค๋Š”) ์˜๋ฏธ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์‹œ์—์„œ๋Š” .red๊ฐ€ relative ํฌ์ง€์…˜์ด์–ด์„œ .blue๋Š” .red๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค.
  • ๊ธ€์˜ ํ๋ฆ„์—์„œ ์™„์ „ํžˆ ๋น ์ ธ์„œ, ์š”์†Œ์˜ ์›๋ž˜ ์ž๋ฆฌ๋Š” ์ฐจ์ง€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

.red {
  position: relative;
  top: 0;
  left: 10px;
}

.blue {
  position: absolute;
  right: 10px;
  bottom: 15px;
}

fixed ํฌ์ง€์…˜

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์„ ๊ธฐ์ค€์œผ๋กœ ๊ณ ์ •๋œ ๋ฐฐ์น˜์ž…๋‹ˆ๋‹ค. ๊ธ€์˜ ํ๋ฆ„์—์„œ ์™„์ „ํžˆ ๋น ์ ธ์„œ, ์š”์†Œ์˜ ์›๋ž˜ ์ž๋ฆฌ๋Š” ์ฐจ์ง€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‚ด๋น„๊ฒŒ์ด์…˜์„ ๋งŒ๋“ค๊ฑฐ๋‚˜ ํ•  ๋•Œ ๊ฒน์น˜์ง€ ์•Š๋„๋ก ๋งˆ์ง„์„ ๋„ฃ์–ด์ฃผ๊ธฐ๋„ ํ–ˆ์—ˆ์ฃ .

 

sticky ํฌ์ง€์…˜

static์ฒ˜๋Ÿผ ์›๋ž˜ ์œ„์น˜์— ๋ฐฐ์น˜๋˜์–ด ์žˆ๋‹ค๊ฐ€, ์ •ํ•ด์ง„ ์œ„์น˜์— ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์Šคํฌ๋กค๋˜๋ฉด ๊ทธ๋•Œ๋ถ€ํ„ฐ fixed์ฒ˜๋Ÿผ ๊ณ ์ •๋˜์–ด ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” static์ฒ˜๋Ÿผ ๋ฐฐ์น˜๋˜๊ธฐ ๋•Œ๋ฌธ์— ์š”์†Œ์˜ ์›๋ž˜ ์ž๋ฆฌ๋ฅผ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค.

 

z-index๊ฐ’

์•ž๋’ค ์ˆœ์„œ๋ฅผ ์ •ํ•  ๋•Œ ์“ฐ๋Š” ๊ฐ’์ž…๋‹ˆ๋‹ค. ์ˆœ์„œ๊ธฐ ๋•Œ๋ฌธ์— ๋‹จ์œ„ ์—†์ด ์”๋‹ˆ๋‹ค. ๊ฐ’์ด ๋†’์„์ˆ˜๋ก ํ™”๋ฉด์—์„œ ์•ž์ชฝ์ž…๋‹ˆ๋‹ค. ๊ฐ’์ด ๊ฐ™์œผ๋ฉด ์ฝ”๋“œ์—์„œ ์•„๋ž˜ ์ค„์— ์žˆ๋Š” ์š”์†Œ๊ฐ€ ์•ž์ชฝ์— ๋ณด์ž…๋‹ˆ๋‹ค.