JQuery STEP 5 - JQuery + Box Model

★ jQuery + Box Model

• 상자 크기?
• 1. css 문법을 이용하였을 경우

//1. CSS
console.log('width', $('#box').css('width'));
console.log('height', $('#box').css('height'));

$('#box').css('width', '500px');

• 2. jQuery 문법을 이용하였을 경우
• width(), height()

//2. 
console.log('width', $('#box').width());        //수치(px)
console.log('height', $('#box').height());

$('#box').width(300);

• 3. innerWidth(), innerHeight : width/height + padding

//3. width/height + padding 
console.log('innerWidth', $('#box').innerWidth());        //수치(px)
console.log('innerHeight', $('#box').innerHeight());

• 4. outerWidth(), outerHeight : width/height + padding + border = 실제 사각형 영역

//4. width/height + padding + border = 실제 사각형 영역
console.log('outerWidth', $('#box').outerWidth());        //수치(px)
console.log('outerHeight', $('#box').outerHeight());

• 5. outerWidth(true), outerHeight(true) :  width/height + padding + border + margin = 실제 사각형 영역 + 마진

console.log('outerWidth(true)', $('#box').outerWidth(true));        //수치(px)
console.log('outerHeight(true)', $('#box').outerHeight(true));