position์ด๋ž€?

jiniยท2023๋…„ 3์›” 30์ผ
0

CS๐ŸŽ€

๋ชฉ๋ก ๋ณด๊ธฐ
8/13
post-thumbnail

๐Ÿ—‚ position์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”

CSS์˜ ์†์„ฑ์ค‘ ํ•˜๋‚˜๋กœ ์›น ๋ฌธ์„œ ์•ˆ ์š”์†Œ๋“ค์„ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ•  ์ง€๋ฅผ ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.
position ์†์„ฑ์„ ์ด์šฉํ•˜๋ฉด ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€๊ฐ™์€ ์š”์†Œ๋“ค์„ ์›ํ•˜๋Š” ๊ณณ์— ์œ„์น˜์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • static : position์†์„ฑ์˜ ๊ธฐ๋ณธ ๊ฐ’์œผ๋กœ ๋‹ค๋ฅธ ์š”์†Œ์™€์˜ ๊ด€๊ณ„์— ์˜ํ•ด ์ž๋™์œผ๋กœ ๋ฐฐ์น˜๋˜๊ณ  top, left, right, bottom๋“ฑ์˜ offset ๊ฐ’์„ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

  • relative : ์›๋ž˜ ์žˆ๋˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ขŒํ‘œ๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์›๋ž˜ ์žˆ๋˜ ์œ„์น˜๋Š” position : static(default) ์ด์—ˆ์„ ๋•Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

  • absolute : ์›๋ž˜ ์œ„์น˜์™€ ์ƒ๊ด€ ์—†์ด ์ ˆ๋Œ€ ์ขŒํ‘œ์™€ ํ•จ๊ป˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. absolute ์†์„ฑ์€ ๊ธฐ์ค€์ ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. absolute๋Š” position ๊ฐ’์ด static์ด ์•„๋‹Œ ๊ฒƒ ์ค‘ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์š”์†Œ(๋ถ€๋ชจํƒœ๊ทธ)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

  • fixed : absolute์†์„ฑ๊ณผ ๋น„์Šทํ•˜๊ฒŒ ๋ฌธ์„œ์˜ ํ๋ฆ„๊ณผ ์ƒ๊ด€์—†์ด ์ ˆ๋Œ€ ์ขŒํ‘œ์™€ ํ•จ๊ป˜ ์œ„์น˜๋ฅผ ์ •ํ•ด์ค๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด ๊ธฐ์ค€์ ์€ ๋ทฐํฌํŠธ์˜ ์™ผ์ชฝ ์œ„ ๊ผญ์ง€์ ์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

  • sticky : sticky๋Š” ๊ธฐ์ค€์ ์„ ๋„˜์ง€ ์•Š์„ ๋•Œ๋Š” relative์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๋‹ค๊ฐ€ ๊ธฐ์ค€์ ์„ ๋ฒ—์–ด๋‚˜๋ฉด fixed์ฒ˜๋Ÿผ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. scroll์ด ๊ณ„์†๋˜๋ฉด ๋งˆ์ง€๋ง‰ ์œ„์น˜์—์„œ ๋ฉˆ์ถฅ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์ธ ์ƒํ™ฉ์—์„œ sticky์†์„ฑ์˜ ๊ธฐ์ค€์ ์€ ๋ถ€๋ชจ์š”์†Œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

profile
๐ŸŒฑ

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