๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์ œ์ด์ฟผ๋ฆฌ ์Šคํƒ€์ผ ๊ด€๋ จ ๋ฉ”์„œ๋“œ

by Youcodein 2022. 9. 6.
728x90
๋ฐ˜์‘ํ˜•

jQuery : ์Šคํƒ€์ผ ๊ด€๋ จ ๋ฉ”์„œ๋“œ

>

css() ๋ฉ”์„œ๋“œ

์„ ํƒํ•œ ์š”์†Œ์˜ css์†์„ฑ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.

์‹คํ–‰ ๋ถ„๋ฅ˜ ํ˜•์‹
์ทจ๋“ $("div").css("width");
์ƒ์„ฑ, ๋ณ€๊ฒฝ $("div").css("background-color", "red").css("padding", "10px");
$("div").css({background-color: "red", padding: "10px"});
์ฝœ๋ฐฑ ํ•จ์ˆ˜ $("div").css("width", function(index, .w) {
// index๋Š” ๊ฐ div ์š”์†Œ์˜ index 0,1,2
// w์€ ๊ฐ div ์š”์†Œ width ์†์„ฑ
return css ์†์„ฑ // ๊ฐ div ์š”์†Œ์˜ css ์†์„ฑ์„ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
});
โ€ฆโ€ฆ

<div>๋‚ด์šฉ</div>
<div>๋‚ด์šฉ</div>
<div>๋‚ด์šฉ</div>

width, height ๊ด€๋ จ ๋ฉ”์„œ๋“œ

๋ฉ”์„œ๋“œ ์ข…๋ฅ˜ ์„ค๋ช…
width() ์š”์†Œ์˜ ๊ฐ€๋กœ ๊ธธ์ด๋ฅผ ์ทจ๋“, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
innerWidth() padding์ด ์ ์šฉ๋œ ์š”์†Œ์˜ ๊ฐ€๋กœ ๊ธธ์ด๋ฅผ ์ทจ๋“, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
outerWidth() border์™€ margin์ด ์ ์šฉ๋œ ์š”์†Œ์˜ ๊ฐ€๋กœ ๊ธธ์ด๋ฅผ ์ทจ๋“, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
outerWidth()๋Š” ์š”์†Œ์˜ width๊ฐ’ + ์ขŒ โˆ™ ์šฐ border ๊ฐ’
outerWidth(true)๋Š” ์š”์†Œ์˜ width๊ฐ’ + ์ขŒ โˆ™ ์šฐ border๊ฐ’ + ์ขŒ โˆ™ ์šฐ margin๊ฐ’
height() ์š”์†Œ์˜ ๋†’์ด๋ฅผ ์ทจ๋“, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
innerHeight() padding์ด ์ ์šฉ๋œ ์š”์†Œ์˜ ๋†’์ด๋ฅผ ์ทจ๋“, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
outerHeight() border์™€ margin์ด ์ ์šฉ๋œ ์š”์†Œ์˜ ๋†’์ด๋ฅผ ์ทจ๋“, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
outerHeight()๋Š” ์š”์†Œ์˜ height๊ฐ’ + ์ƒ โˆ™ ํ•˜ border ๊ฐ’
outerHeight(true)๋Š” ์š”์†Œ์˜ height๊ฐ’ + ์ƒ โˆ™ ํ•˜ border๊ฐ’ + ์ƒ โˆ™ ํ•˜ margin๊ฐ’
728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€