CSS calc() 함수로 유동적인 크기 계산하기

CSS에서 calc() 함수는 서로 다른 단위를 조합해 속성값을 동적으로 계산할 수 있게 해주는 강력한 도구입니다. 예를 들어 백분율(%)과 픽셀(px)을 함께 연산하거나, 뷰포트 단위(vw, vh)와 고정값을 혼합하여 반응형 레이아웃을 손쉽게 구현할 수 있습니다.

아래 예제는 calc() 함수를 사용하여 화면 전체 너비에서 100px를 뺀 크기를 요소에 적용하는 방법을 보여줍니다.

예제

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            position: absolute;
            width: calc(100% - 100px);
            background-color: blue;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <div id = "demo">This is it!</div>
   </body>
</html>

calc() 함수의 주요 특징

지원 연산자: 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 사용할 수 있습니다.
단위 혼합 가능: %, px, em, rem, vw, vh 등 서로 다른 단위를 자유롭게 조합할 수 있습니다.
연산자 주의사항: +와 - 연산자 앞뒤에는 반드시 공백이 있어야 하며, *와 /의 한쪽 값은 숫자여야 합니다.
브라우저 호환성: 모든 최신 브라우저에서 지원되므로 안심하고 사용할 수 있습니다.

이처럼 calc() 함수를 활용하면 고정된 값 대신 상황에 맞게 계산된 값을 적용할 수 있어, 복잡한 레이아웃도 간결하고 유연하게 처리할 수 있습니다.