css relative 1

relative vs absolute ๊ฐœ๋… ๋น„๊ต

์˜ค๋Š˜์€ CSS position ์†์„ฑ ๊ฐ’์— ๋Œ€ํ•ด ์•Œ์•„๋ด…์‹œ๋‹ค. ๐ŸŒป position์ด๋ž€? CSS position ์†์„ฑ์€ ๋ฌธ์„œ ์ƒ์— ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. position ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์น˜๋ฅผ ์ง€์ •ํ•  ๋•Œ์—๋Š” ์–ด๋Š ๊ณณ์—์„œ๋ถ€ํ„ฐ ์–ผ๋งŒํผ ๋–จ์–ด์ง€๊ฒŒ ํ•  ๊ฒƒ์ธ์ง€๋ฅผ ์ง€์ •ํ•ด์ค˜์•ผ ํ•˜๋ฏ€๋กœ top, right, bottom, left ์†์„ฑ๊ณผ ํ•จ๊ป˜ ์ž‘์„ฑํ•ด ์ค๋‹ˆ๋‹ค. position์˜ ๊ธฐ๋ณธ๊ฐ’์€ static์ด๊ณ  ๊ทธ ์™ธ์˜ ๊ฐ’์œผ๋กœ๋Š” relative, absolute, fixed, sticky๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“ position ๊ฐ’ 1. static position ์†์„ฑ์˜ ๊ธฐ๋ณธ๊ฐ’์ด๋ฉฐ ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.top, right, bottom, left, z-index ์†์„ฑ์ด ์•„๋ฌด๋Ÿฐ ์˜ํ–ฅ๋„ ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 2. re..

CSS 2021.03.03
๋ฐ˜์‘ํ˜•