CSS calc() 함수 사용법, 예시 정리

 

CSS에서 calc() 함수의 사용법과 대표적인 사용 예시를 정리해보겠습니다.

 

CSS가 점점 고도화되어, SCSS같은 경우는 자바스크립트처럼 변수 선언과 연산자 등을 실행할 수 있게 되었습니다.

 

오늘은 CSS에서 사용할 수 있는 calc함수에 대해서 간단하게 알아보겠습니다.

calc()란?

 

calc는 계산하다(Calculate)의 약자로, CSS에서 특정한 수치를 계산해내는 함수입니다.

 

대표적으로 아래처럼 요소의 높이나 너비를 계산하는 데에 쓰이며 이 밖에도 다양하게 응용할 수 있습니다. 

 

div.div1{
	height: calc(100vh - 90px);
}

div.div2{
	width: calc(100% - 90px);
}

 

calc함수의 다양한 쓰임은 MDN calc()설명 페이지를 참고하세요.

calc 함수 사용 예시

 

이번엔 구체적인 예시를 들어 설명해보겠습니다.

만약 fixed된 헤더의 높이를 제외하고 섹션의 높이를 설정하고 싶은 경우라면 아래와 같이 설정할 수 있습니다.

 

header{position:fixed; width: 100%; height: 90px; 
    display: flex; justify-content: space-around; align-items: center;}

section{position:relative; top:100px;
    min-width: 800px; height: calc(100vh - 90px);}

섹션에 height: calc(100vh - 헤더 높이);를 해주면

100vh에서 헤더 높이를 뺀 나머지 값이 자동으로 계산되어 섹션의 높이가 설정됩니다.

괄호안에 띄어쓰기를 하지 않으면 실행되지 않으니 띄어쓰기에 주의하셔야합니다.

 

여기까지 CSS calc() 함수 사용법, 예시를 정리해보았습니다. 읽어주셔서 감사합니다.