퍼센트와 픽셀 혼용 계산법 (calc)

 

 

 

calc의 퍼센트와 픽셀 계산법

퍼센트 작업중에 일정한 픽셀값을 빼서 계산하고 싶을 때 calc를 이용하면 간편하게 화면을 그려낼 수 있습니다
예를 들어 div 에 width 값이 100%일 때 50px 만큼만 빼고 싶은 경우를 가정해 보겠습니다.

div {width:calc(100% - 50px);}

이렇게 calc를 이용해서 간단하게 표현이 됩니다.
calc는 예제에서 처럼 %,px 말고도 em, pt 등 모든 단위 사용이 가능하며 빼기 뿐만 아니라 더하기(+), 곱하기(*), 나누기(/)도 사용이 가능합니다.

div {width:calc(100% + 50px);}
div {width:calc(100% * 2);}
div {width:calc(100% / 2);}

div {width:calc(100% / 3 - 50px);} //이렇게 연산기호를 혼용해서도 사용 가능