요소의 크기와 박스 모델

요소 크기의 구조

포함관계가 아래와 같다 (예: margin box 는 content box 를 포함한다)

• margin box
  • border box
    • padding box
      • content box

Element 객체

offsetWidth, offsetHeight

Element.offsetWidth, Element.offsetHeight
해당 요소의 border 포함안의 것 모두 포함한 크기

• content box + scroll bar + padding + border
• offsetLeft, offsetTop
  • 부모 (offsetParent) 를 기준으로한 엘리먼트의 위치 좌표
• offsetParent
  • offsetLeft, offsetTop의 기준이 되는 부모 엘리먼트

clientWidt, clientHeight

Element.clientWidt, Element.clientHeight
해당 요소의 내부 컨텐츠의 크기 (즉, border 제외)

• content box + padding box
• clientLeft, clientTop
  • borer 값과 동일

scrollWidth, scrollHeight

Element.scrollWidth, Element.scrollHeight
해당 요소의 감쳐진 스크롤 영역을 포함한 크기 (border 제외)

• overflow: scroll 인 경우 화면에 보이지 않는 스크롤영역까지 포함되기 때문에 offsetWidth/offsetHieght 값보다 scoll의 값이 더 크다
• scrollLeft/scrollTop
  • 스크롤된 x,y 좌표
  • 스크롤 한번도 안했을 때 0,0 이라고 생각하면 파악하기 쉽다

css의 box-sizing

box-sizing: content-box;

• css 의 width property 값
  • = content box
  • = inner content
• css 의 width 값 <= 요소의 직관적인 크기 (padding 값 border 너비 까지 포함한 크기)

box-sizing: border-box;

• css 의 width property 값
  • = border box
  • = inner content + padding + border
• css 의 width = 요소의 직관적인 크기

references

• https://ko.javascript.info/size-and-scroll
• https://web.dev/i18n/ko/learn/css/box-model/
• https://stackoverflow.com/questions/30379924/understanding-offsetwidth-and-clientwidth-when-css-border-box-is-active