[CSS]div 3개 레이아웃 만들기( calc() 사용법)

html로 레이아웃을 짜다보면 객체들에게 똑같은 가로값을 주고 싶은데 계산하기 쉽지 않을때가 많습니다.

또 반응형으로 웹사이트를 만들다보면, 값을 딱 지정해 놓으면 브라우저 크기마다 다르게 설정해 줘야하는 번거로움이 있는데 이렇때 사용하면 좋은 CSS 속성중에 하나가 calc 입니다! 

 

사용가능한 브러우저!

출처 :https://www.w3schools.com/cssref/func_calc.asp

이정도면 크게 무리없이 사용가능할 것 같아요! (공무원분들이 많이 사용할것 같은 사이트에는 쓰기 무리가 있겠네욤)

 

 

작성 방법 예시

div {
  width : 95%; /* calc() 를 지원하지 않는 브라우저를 위한 fallback */
  width : -webkit-calc(100% - 20px); /* WebKit */
  width : -moz-calc(100% - 20px); /* Firefox */
  width : -ms-calc(100% - 20px); /* MS Explorer */
  width : -o-calc(100% - 20px); /* Opera */
  width : calc(100% - 20px); /* Standard */
}

(가로값을 100%에서 20px를 뺀 값으로 지정하겠다는 뜻) 

 

 

특징

1. +, - , *, / 사칙연산 사용가능

2. 왼쪽에서 오른쪽으로 계산(곱셈,나눗셈 먼저 계산)

3. 덧셈, 뺄셈은 좌우 띄어쓰기 필수!

4. 변수도 사용가능

 

 

사용 예시

보통 div를 홀 수 단위로 띄울때 발생하는 문제를 해결할 수 있어 아주 편리하다.

이렇게 div 3개를 나란히 같은 크기로 놓고 싶은데, 가로값이 33.333333... %이란 애매한 숫자가 나온다. 그럴때 calc를 쓰면 쉽게 해결 할 수 있다. 

div{
float: left;
width: calc(100%/3 - 20px);
margin:0 10px;
 
}

 이렇게 해주면 100%에서 3으로 나눈후 20px를 뺀 나머지를 가로 값으로 지정한다는 뜻이다. 

그리고 마진을 왼쪽 오른쪽 10px를 주면 아까 뺀 20px로 나눠가지기 때문에 여백을 동일하게 줄 수 있다.( 맨처음과 마지막 DIV의 양 사이드의 마진은 조정해 줄 필요가 있지만..)

 

calc(100%/3 - 20px); 를

3 -> 객체의 갯수

20px -> 한 객체의 양쪽 마진의 합

으로 생각하면 간편하게 사용가능할 것 같다!