[CSS] calc() 함수 사용법

calc() 란?

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 반응형이나 모바일 코딩을 하다 보면 %로 값을 주기가 애매한 것들이 있습니다. 이러한 것들을 float이나 position absolute 또는 fixed를 사용하거나 정확한 px 값을 지정하여 미디어 쿼리를 사용하여 해상도별로 나누어 해결하곤 하는데, calc() 함수를 사용하여 값을 쉽게 지정해 줄 수 있습니다.

font-size: calc( 10px + 10px );

 

calc()함수 사용

검사버튼 삭제버튼 calc() 함수는 width, height, margin, padding 값을 사칙연산자를 이용하여 표현할 수 있습니다. 각각 사용방법을 알아보겠습니다. float값으로 width값의 %를 나누기 애매할 경우에 사용하기에 유용합니다. 아래와 같이 lst_width class로 쌓여있는 li태그들을 7등분 하기 위해 calc()함수를 이용하여 간단하게 처리 할 수 있습니다.

<ul class="lst_width">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

.lst_width>li{float:left;width:calc(100% / 7);height:50px;color:#fff;text-align:center}
.lst_width>li:nth-child(odd){background:#333}
.lst_width>li:nth-child(even){background:#999}

 

반응형 웹과 모바일 코딩을 하면서 width와 height의 값을 %로 사용하면서 길이가 깔끔하게 떨어지지 않을 때에 소수점으로 li:first-child{width:33.34%} li{width:33.33%} 이런 식으로 써줘도 상관없지만 calc() 함수를 이용하여 코딩을 한다면 한층 더 간결하고 깔끔한 코드가 되겠네요.

 

유용한 팁!

• 무엇보다 모든 계산은 왼쪽에서 오른쪽으로 진행되며
• 사칙연산과 마찬가지로 곱하기, 나누기가 제일 먼저 연산되며
• calc()함수는 현재 오페라 브라우저와 IE9 미만의 브라우저에서는 지원되지 않으며
• 호환성을 위해 -moz, -webkit 과 같은 vendor-prefix를 먼저 작성해야 하며
• 예를 들어 calc(50% - 10px) 과 같이 연산시 다른 단위값들을 사용할 수 있으며   
• calc(100% - 20px)과 같이  더하기(+), 빼기(-) 연산자의 경우 앞뒤 공백이 반드시 들어가야 하나 곱하기(x), 나누기(/)는 공백이 필요하지 않습니다.

 

 

 

 

 

 

출처: https://www.biew.co.kr/29