[WEB] CSSOM์ด๋ž€?

๐Ÿ“„ CSSOM์ด๋ž€?

CSSOM์€ CSS Object Model์˜ ์•ฝ์ž์ž…๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €์—์„œ dom์„ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด, css์„ ๋ณ‘ํ•ฉํ•ด์„œ cssom์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

HTML๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ DOMํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, CSS๋ฅผ ํŒŒ์‹ฑํ•ด์„œ ์ž๋ฃŒ๋ฅผ ํŠธ๋ฆฌ ํ˜•ํƒœ๋กœ ๊ตฌ์กฐํ™”ํ•œ ๊ฒƒ์„ CSSOM์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

CSSOM์—์„œ CSS์—๋Š” cascading์ด๋ผ๋Š” ๊ทœ์น™์ด ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ CSS๋ฅผ ์ •์˜ํ•˜์ง€ ์•Š์•„๋„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์„ค์ •๋œ ๊ธฐ๋ณธ์ ์ธ CSSํŒŒ์ผ์ด ์žˆ๋‹ค๋ฉด ๊ทธ๊ฒƒ๋“ค์ด ์ „๋ถ€ ๋‹ค ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

dom๊ณผ cssom์„ ํ•ฉํ•ด์„œ ์ตœ์ข…์ ์œผ๋กœ rendertree๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

rendertree์—๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ถ๊ทน์ ์œผ๋กœ ๋ณด์—ฌ์ง€๋Š” ์š”์†Œ๋งŒ ์„ ๋ณ„๋ฉ๋‹ˆ๋‹ค.

opacity: 0;
visibility: hidden;

Render Tree์— ํฌํ•จ๋จ.

display: none;

Render Tree์— ํฌํ•จ๋˜์ง€ ์•Š์Œ.

์ถœ์ฒ˜

  • ๋“œ๋ฆผ์ฝ”๋”ฉ

Leave a comment