[자바스크립트] width, height, padding, margin, border를 포함한 크기 구하기

하나의 태그에는 여러가지 영역이 있다.

어디서부터 어디까지를 크기의 범위로 가정하는지 각 영역을 포함담당하는 함수를 통해 알아본다.

 

기본 크기 - width( ), height( )

제일 안쪽의 크기는 가로에 width, 세로에 height를 사용해서 구한다.

태그의 내용물의 크기만을 구해준다.

 

기본크기 + padding - innerWidth( ), innerHeight( )

padding을 포함한 크기는 inner를 붙여준다.

 

기본크기 + padding + border - outerWidth( ), outerHeight( )

테두리의 크기까지 합한 크기는 outer를 붙여서 표현한다.

 

기본크기 + padding + border + margin - outerWidth(true), outerHeight(true)

마지막으로 margin까지 모든 것을 다 포함한 크기는 outer함수에 인자로 true값을 주어서 구할 수 있다.

참고로 인자의 default값은 false이므로 위와 동일한 결과를 낸다.

margin바깥을 보면 position의 영역이 존재하는 것을 볼 수 있다.

아래 글을 참고하면 위치함수의 position이 어째서 부모노드를 기준으로 하는지 알 수 있다.

[자바스크립트] 노드의 위치 , position, offset의 차이점

 

크기영역을 이해해 이미지 이동시키기

그렇다면 만약 이 물고기 액자를 오른쪽 테두리에 붙여주려면 어떻게 위치를 잡아야 할까

바깥 영역의 테두리 안쪽의 넓이를 구하고

물고기테두리까지의 넓이를 빼주고

오른쪽 영역의 마진값까지 빼준다면 

              endX가     innerWidth일 때,                                         outerWidth를 빼줬을 때,                                         margin-right를 빼줬을 때         

 영역의 크기와 위치는 상당히 밀접한 관련이 있으므로 개념을 잘 이해해보자