계산식을 사용하는 CSS 함수 - calc()

최근에는 CSS에서 속성 값을 지정할 때 특정한 값이 아니라 계산식을 사용할 수도 있습니다.

+, -, *, / 를 계산한 결과가 속성 값이 되는 것이죠.  

예를 들어, 다음 소스는 요소의 너비를 부모 요소 너비 전체에서 200px을 뺀 만큼 지정하는 것입니다.

반응형으로 동작해서, 부모 요소의 너비가 얼마가 되든 무조건 200px을 뺀 나머지 크기를 너비로 사용하죠.

웹 화면에서 왼쪽에 200px 너비만큼 내비게이션이 있을 경우 사용하면 되겠죠?

.element {
	width: calc(100% - 200px);
}

calc() 함수의 매개변수 자리에는 계산식이 들어갑니다. 이 때 주의할 것은 '+'와 '-' 연산자를 사용할 경우 반드시 연산자 앞뒤로 공백이 있어야 한다는 점입니다. +와 -는 양의 숫자나 음의 숫자를 나타낼 때도 사용되기 때문에 연산자인지, 부호인지 구별하기 위한 것이죠. '*'와 '-' 연산자는 공백이 없어도 됩니다.  (하지만, 소스를 작성할 때는 읽기 쉽도록 적절하게 공백을 넣는 것이 좋습니다. )

// 틀린 사용
calc(100%-20px)
calc(50%+20px)

// 맞는 사용
calc(100% - 20px)
calc(100% + -20px)
calc(50% + 20px)

 

아래 소스는 반응형 웹에서 화면 크기가 달라지더라도 내비게이션 영역은 고정하고 콘텐츠 영역만 크기가 달라지도록 한 것입니다. 여러 가지 방법이 있겠지만, calc()를 사용하면 좀더 편리하죠.

nav의 너비는 200px로 고정하고, 오른쪽의 div 영역은 calc() 함수를 사용해서 화면 크기에 따라 달라지도록 합니다.  

<nav>Menu</nav>
<div>Content</div>

body {
  margin:0;
  font-size: 3em;
  text-align: center;
  display: flex;
}
nav {
  width:200px;
  height: 100vh;
  background-color: gray;
}
div {
  width: calc(100% - 200px);
}

전체 화면일 때

calc() 함수는 계산이 필요한 어디에서든 사용할 수 있습니다. 예를 들어, 선형 그러데이션을 적용할 때도 calc()를 사용해 좀더 쉽게 여러 효과를 만들 수 있습니다.

div {
  width:400px;
  height: 200px;
  background-image: linear-gradient(skyblue 0%, white 20px, skyblue 100%);
}

 

div {
  width:400px;
  height: 200px;
  background-image: linear-gradient(skyblue 0%, white 20px, white calc(100% - 20px), skyblue 100%);
}