[CSS] Css Box-Modeling 사이즈 계산

오늘은 Box-model의 사이즈 계산 방법에 대해서 알아볼 것이다.

 

Box-model의 기본적인 개념에 대해서 모르는 사람은 해당 링크로 가서 한 번 가볍게 읽고 오는 것을 추천한다.

Box-Model

Box 모델을 사용할 때 우리는 각 Element에 border, padding, margin을 이용하여 크기를 지정한다.

 

오늘은 해당 Element의 크기를 계산하는 방법에 대해서 알아볼 것이다.

 

예를 들어 아래와 같은 Element가 있다고 가정해보자.

div {
  width: 50px;
  height: 50px;
  padding: 30px;
  border: 1px solid #ff
  margin: 30px;
}

계산하기

계산는 height와 width가 따로 계산 되어야 한다.

width

height

그럼 우리가 처음 코드를 짰던 것을 토대로 식에 집어넣는다면,

width = 300px + (30px+30px) + (1px+1px) + (30px+30px) = 424px

height = height = 150px + (30px+30px) + (1px+1px) + (30px+30px) = 274px

 

이렇게 간단하게 우리는 box의 size를 구할 수 있게 되었다.

 

그럼 모든 것이 완벽하고 모델링을 쉽게할 수 있을 것 같지만..

문제가 생긴다..

 

문제는 반응형 레이아웃일 경우 px와 같은 절대 단위가 아닌 %와 같은 상대 단위로 적용해야 한다.

 

그럼 우리가 위에서 봤던 계산식이 먹히지 않게 되는데, 이 부분을 해결하는 방법은 다음 강의!에서 이어가도록 하겠다 :)