\
[๊ฐœ๋…] CSS - Position ์†์„ฑ
ยท
๐Ÿ“š STUDY/CSS
์ด ๊ธ€์€ MDN์˜ ๋‚ด์šฉ์„ ๊ณต๋ถ€ํ•˜์—ฌ ๊ฐœ์ธ์ ์ธ ํ•ด์„์„ ํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.ํ‹€๋ฆฐ ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š” ๐Ÿ˜† CSS - Position Attribute๋ฌธ์„œ ์ƒ์— ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ •์˜์ด๋ฉฐ, top, right, bottom, left ์†์„ฑ์ด ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•  ์ตœ์ข… ์œ„์น˜๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.    Static - Default์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜ํ•˜๊ณ , ์ž๊ธฐ ์ž์‹ ์„ ๊ธฐ์ค€์œผ๋กœ top, right, bottom, left, z-index ์†์„ฑ์ด ์•„๋ฌด๋Ÿฐ ์˜ํ–ฅ๋„ ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Relative ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜ํ•˜๋ฉฐ, ์ž๊ธฐ ์ž์‹  ๊ธฐ์ค€์œผ๋กœ top, right, bottom, left์˜ ๊ฐ’์— ๋”ฐ๋ผ ์œ„์น˜๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.๋‹ค๋ฅธ ์š”์†Œ์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š์œผ๋ฉฐ, ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ์—์„œ ์š”์†Œ๊ฐ€ ์ฐจ์ง€..
[๊ฐœ๋…] CSS - Cascading์ด๋ž€?
ยท
๐Ÿ“š STUDY/CSS
์ด ๋‚ด์šฉ์€ MDN์—์„œ ์†Œ๊ฐœํ•œ CSS Cascading์„ ํ•ด์„ํ•˜์—ฌ ์ œ ๋ฐฉ์‹๋Œ€๋กœ ์ดํ•ดํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.ํ‹€๋ฆฐ ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š” ๐Ÿ˜†CSS?CSS๋Š” Cascading Style Sheets์˜ ์•ฝ์ž๋กœ ์›นํŽ˜์ด์ง€๋ฅผ ๊พธ๋ฏธ๋ ค๊ณ  ์ž‘์„ฑํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.์ด๋ฆ„์—์„œ๋„ ์•Œ ์ˆ˜ ์žˆ๋“ฏ, Cascading์€ CSS์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค. Cascading์ด๋ž€?Cascade์˜ ์‚ฌ์ „์  ์˜๋ฏธ : ์ข…์† ๊ณต์‹๋ฌธ์„œ์ธ MDN์—์„œ ์†Œ๊ฐœํ•˜๋Š” CSS์—์„œ์˜ Cascading ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. "The cascade is an algorithm that defines how user agents combine property values originating from different sources.""์บ์Šค์ผ€์ด๋“œ๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์†Œ์Šค์—์„œ ..