CSS calc() 함수 사용법

CSS에서 정말 유용한 calc() 함수에 대해 이야기해볼게요. 레이아웃을 디자인할 때 고정된 단위만으로는 유연한 디자인을 구현하기 어려운 경우가 많잖아요? 이럴 때 calc() 함수가 큰 도움이 된답니다. 이 함수는 CSS에서 수치 계산을 가능하게 해주고, 다양한 단위를 혼합해서 사용할 수 있어요.

calc() 함수의 기본 문법

property: calc(expression);

여기서 expression은 수학적 표현식으로, 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 사용할 수 있어요. 단, 곱셈과 나눗셈은 calc() 함수 내에서 사용할 수 없고, 단위가 서로 다를 경우에는 사용할 수 없으니 주의해 주세요!

예제 1: 너비와 여백을 조합한 레이아웃

먼저, calc() 함수를 사용해서 요소의 너비를 설정하고 여백을 고려한 레이아웃을 만들어볼게요.

Box 1

Box 2

Box 3

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

.container {
    display: flex;
}

.box {
    width: calc(33.33% - 20px); /* 3개의 박스가 여백을 포함하여 100%를 차지하도록 설정 */
    margin: 10px;
    background-color: lightblue;
    padding: 20px;
    box-sizing: border-box;
}

여기서는 각 박스의 너비를 calc(33.33% - 20px)로 설정해서 여백을 고려한 너비를 계산했어요.

 

예제 2: 반응형 디자인

calc() 함수는 반응형 디자인에서도 정말 유용해요. 아래 예제를 통해 뷰포트의 크기에 따라 요소의 크기를 조정해볼게요.

Responsive Box

<div class="responsive-box">Responsive Box</div>

.responsive-box {
    width: calc(100vw - 50px); /* 뷰포트 너비에서 50px을 뺀 너비 */
    height: 200px;
    background-color: coral;
}

 

예제 3: 폰트 크기 조정

calc() 함수를 사용해서 폰트 크기를 동적으로 조정할 수도 있어요. 

<p class="dynamic-font">This is a dynamically sized font.</p>

.dynamic-font {
    font-size: calc(16px + 1vw); /* 기본 16px에 뷰포트 너비의 1%를 추가 */
}

여기서는 기본 폰트 크기인 16px에 뷰포트 너비의 1%를 더해서 화면 크기에 따라 폰트 크기가 조정되도록 했답니다.

 

예제 4: 고정된 높이와 비율 유지

마지막으로, 고정된 높이를 유지하면서 비율에 따라 너비를 조정하는 예제를 보여드릴게요.

<div class="aspect-ratio-box">Aspect Ratio Box</div>

.aspect-ratio-box {
    width: calc(100% - 40px); /* 전체 너비에서 40px을 뺀 너비 */
    height: 200px; /* 고정 높이 */
    background-color: lightgreen;
}

이 예제에서는 고정된 높이를 유지하면서 너비를 동적으로 조정했어요.