[HTML] clientWidth, offsetWidth, scrollWidth 개념 정리

# *------------------------------------------------------------------------------------------*
# clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWIdth, scrollHeight 개념 정리
# *------------------------------------------------------------------------------------------*

1. element.offsetWidth, element.offsetHeight
 1) element.offsetWidth와 element.offsetHeight는 W3C권고안이 아님 (MSIE's DHTML Object Model)
 2) element.offsetWidth : element의 border, 수직/수평 padding, css width를 포함한폭
     * 즉 화면을 봤을 때 보여지는 엘리먼트의 폭
 3) element.offsetHeight : element의 border, 수직/수평 padding, cssheight를포함한 높이
     * 즉 화면을 봤을 때 보여지는 엘리먼트의 높이
 
[관련URL] offsetWidth : http://developer.mozilla.org/en/docs/DOM:element.offsetWidth
[관련URL] offsetHeight : http://developer.mozilla.org/en/docs/DOM:element.offsetHeight


2. element.clientWidth, element.clientHeight
 1) W3C 표준 아님 (MSIE의 DHTML Object Model)
 2) element.clientWidth : element의 border를 뺀 안쪽 폭
 * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 안쪽 폭
 3) element.clientHeight : element의 border를 뺀 안쪽 높이
 * 즉 화면을 봤을 때 테두리를뺀 엘리먼트의 안쪽 높이

[관련URL] clientWidth : http://developer.mozilla.org/en/docs/DOM:element.clientWidth
[관련URL] clientHeight : http://developer.mozilla.org/en/docs/DOM:element.clientHeight


3. element.scrollWidth, element.scrollHeight
 1) W3C 권고안이 아님
 2) element.scrollWidth : 엘리먼트의 스크롤 폭
 3) element.scrollHeight : 엘리먼트의 스크롤 높이

[관련URL] element.scrollWidth : http://developer.mozilla.org/en/docs/DOM:element.scrollWidth
[관련URL] element.scrollHeight : http://developer.mozilla.org/en/docs/DOM:element.scrollHeight



출처 : 난 네가좋아님 블로그