길이 값을 구하는 메서드들 width, innerWidth, outerWidth

어떤 요소의 길이값을 가져와야 하는 경우가 있다.

그럴경우 요소의

width 값 만 가져오는경우,

width, padding 값만 가져오는 경우,

width, padding, border 값만 가져오는 경우,

width, padding, border, margin 까지 다 가져오는 경우

그럴경우에 쓰는 메서드 들이다.

일단 그전에 박스 모델의 개념을 알아야 한다.

.width() : 딱 요소의 크기 순수한 크기 만큼만.

.innerWidth() : 요소의 width 값과 padding 값을 더한 값.

.outerWidth() : 요소의 width 값과 padding 값과 border 값을 더한 값.

.outerWidth(true) : .outerWidth() 메서드에 parameter 로 true 를 넘겨줄 경우 요소의 width 값과 padding 값과 border 값과 margin 값까지 더한 크기(default 는 false 로 되어 있다.)

이글에서 다루는 예제는 꼭 css 를 확인하세요

예제

그러면 css3 의 속성중 box-sizing 속성의 값으로 border-box를 사용하면 어떤 결과가 나올까