1. css 속성
<script>
//읽기
//(단위가 붙은)문자열로 반환한다.
console.log('width', $('#box').css('width'));
console.log('height', $('#box').css('height'));
$('#box').css('width', '300px');
</script>
2. 제이쿼리 전용 메소드
//(단위를 생략한)숫자형으로 반환한다.(단위는 px 기본값)
console.log('width()', $('#box').width());
console.log('height()', $('#box').height());
$('#box').height(300);
padding 을 더한 것이 실제 태그의 영역이라서 innerWidth로 제공한다.
width/height + padding > 사각형 내부 크기
console.log('innerWidth()', $('#box').innerWidth()); //260
console.log('innerHeight()', $('#box').innerHeight()); //260
시각적으로 보이는 상자의 크기를 표현할 때
width/height + padding + border
console.log('outerWidth()', $('#box').outerWidth()); //300
console.log('outerHeight()', $('#box').outerHeight()); //300
사각형이 차지하는 영역의 크기
width/height + padding + border + margin
console.log('outerWidth(true)', $('#box').outerWidth(true)); //400
console.log('outerHeight(true)', $('#box').outerHeight(true)); //400
