제이쿼리 style 관련 메서드에 대하여.... 🦑

스타일 관련 메서드

이번 시간에는 살을 붙여주는 스타일과 관련된 메서드에 대해 알아보겠습니다~~

---

css() 메서드

요소에 class 속성을 추가시켜주는 메서드 입니다~~!

실행 분류	형식
취득	&("div").attr("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()	&("div").attr("width");
innerWidth()	padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다.
onterWidth()	border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()는 요소의 width값 + 좌/우 border값 outerWidth(true)는 요소의 width값 + 좌/우 border값 + 좌/우 margin값
height()	요소의 높이를 취득, 변경할 수 있습니다.
innerHeight()	padding이 적용된 요소의 높이를 취득, 변경할 수 있습니다.
outerHeight()	border 와 margin이 적용된 요소의 높이를 취득, 변경할 수 있습니다. outerHeight()는 요소의 height값 + 상/하 border값 outerHeight(true)는 요소의 height값 = 상/하 boder값 + 상/하 margin값

---

위치 관련 메서드

위치의 값을 조정해주는 메서드 입니다~~!

메서드 분류	상세설명
offset()	$("div").offset().left $("div").offset().top $("div").offset({left:10, top:10}) html 기준으로 left, top 값을 취득, 변경할 수 있습니다.
position()	$("div").position().left $("div").position().top 부모 요소 기준으로 left, top 값을 취득할 수 있습니다.