jQuery 복습 - 요소의 치수

//알다시피, Element는 Margin - Border - Padding순으로 껍데기(!)로 씌워져있다. 패!보!마!로 외웠던것을 기억하자(...) 

//width: 순수 Element의 너비 
//height: 순수 Element의 높이 
//innerWidth: Element 에 Padding을 더한 값  
//innerHeight: Element에 Padding을 더한 값 
//outerWidth: Element에 Border를 더한 값 
//outerHeight: Element에 Boder를 더한 값 

//width & height : 앞서 살펴본 메서드들처럼 파라미터를 넣어주면 set, 없으면 get이 된다. 

var txt = ""; 
txt += "Width of div: " + $("#div1").width() + ""; 
txt += "Height of div: " + $("#div1").height(); 
$("#div1").html(txt); // textNode에 넣지만 단순 txt를 뿌려주는것이 아닌, element를 렌더링 하여 DOM화 하는듯함- 

//innerWidth & innerHeight : 패딩을 포함한 값. 이하 생략. 
//이상한게, 이렇게해서 값을 키워보면 패딩값이랑 element 너비,길이가 일정하게 늘어날 줄 알았는데 아니다. element만 커짐- 
$("#div1").innerHeight($("#div1").innerHeight() + 10) 
$("#div1").innerWidth($("#div1").innerWidth() + 10) 

//outerWidth & outerHeight : 보더를 포함한 값. 이하 생략 
$("#div1").outerWidth(300).outerHeight(400); 

//+ outerXXX시리즈에 true를 인자로 넘기면, 패딩, 보더, 마진을 포함한 값을 지정/반환 해 줄수 있다. 
$("#div1").outerWidth(true); 
$("#div1").outerHeight(true); 

//document나, window의 너비나 높이를 가져 올 수도 있다! 아쉽게도, 크기지정은 안된다. 

$(document).width(); 
$(window).width(); 

//메서드체이닝으로 크기를 지정 해 줄수도 있다. :0 

$("#div1").width(500).height(500);