[CSS]css 계산 calc() 함수

다음과 같은 상황에서 쓸 수 있다..

 

 

1줄에 3개씩 배치하고,, margin 값을 10px 주고싶을 때 

 

3개가 배치되려면 하나의 width 값은 33.333%가된다.

 

margin 10px을 주면 3개가 한줄에 배치될수 없고, width 값을 줄이면 원치않는 빈공간이 생기거나 화면의 크기 변화에 따라 

다른 결과가 보여질 수 있다. 

 

이때 calc을 이용해 쉽게 계산할 수 있다. 

 

아래와같이 

width: calc(33.333% - 10px);

width의 값을  calc 계산을 통해 전체 width 의 33.333% 에서 10px을 뺀 값을 준다

 

그리고  margin을 주면 쉽게 한줄에 원하는 만큼 배치할 수 있다.