CSS calc() 함수란?
CSS에서는 calc() 함수를 사용하여 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)과 같은 수학적 계산을 수행하고, 그 결과를 속성 값으로 지정할 수 있습니다. 특히 백분율(%)과 픽셀(px)처럼 서로 다른 단위를 혼합하여 계산해야 할 때 매우 유용합니다.
예를 들어, 요소의 너비를 '전체 너비에서 100px를 뺀 값'으로 설정하고 싶다면 calc(100% - 100px)와 같이 작성하면 됩니다. 반응형 웹 디자인에서 레이아웃을 유연하게 조정할 때 자주 활용됩니다.
calc() 사용 예제
아래 코드는 calc() 함수를 사용하여 div 요소의 너비를 화면 전체 너비에서 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>코드 설명
- width: calc(100% - 100px); — 부모 요소 전체 너비(100%)에서 100px를 뺀 값을 요소의 너비로 지정합니다.
- position: absolute; — 요소를 절대 위치로 배치합니다.
- background-color: blue; — 배경색을 파란색으로 설정하여 계산된 너비를 시각적으로 확인할 수 있게 합니다.
calc() 사용 시 주의사항
- 덧셈과 뺄셈 연산 시 두 값은 반드시 같은 단위이거나 호환 가능한 단위여야 합니다.
- 연산자 앞뒤에는 공백을 넣어야 합니다. 예를 들어
calc(100%-100px)처럼 공백 없이 작성하면 올바르게 해석되지 않습니다. - 곱셈은 한쪽 항이 숫자여야 하며, 나눗셈은 오른쪽 항이 숫자여야 합니다.
- 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 calc() 함수를 지원하므로 안심하고 사용할 수 있습니다.