[CSS] CSS calc() 사용법

 

css에서 수식을 사용하고 싶을 때 

아주 유용한 calc() 사용법이다

CSS calc() 사용법

CSS calc() 함수는 CSS에서 수학적 계산을 할 때 사용다. 이 함수는 두 개 이상의 값과 사칙 연산자 (+, -, *, /)를 조합하여 사용할 수 있다.

 

calc() 함수의 문법

calc() 함수는 다음과 같은 문법을 가진다

width: calc(100% - 50px);

위 예시에서는 width 속성 값이 100%에서 50px을 뺀 값이 된다

 

calc() 함수 사용 예시

두 요소의 너비 조정

.container {
  width: 80%;
  padding: 20px;
}

.item {
  width: calc(50% - 20px);
  /* 50%는 항상 item 요소의 부모 요소인 container의 50%를 의미하며, 20px은 container의 padding 값을 고려한 값입니다. */
}

 

반응형

 

반응형 폰트 크기 조정

h1 {
  font-size: calc(15px + 1vw);
  /* 뷰포트의 너비에 따라 폰트 크기가 조정됩니다. */
}

 

여러 요소의 높이 합 구하기

.container {
  height: calc(100vh - 100px);
}

.item {
  height: calc((100% / 3) - 10px);
  /* container의 높이에서 item 간의 여백을 고려한 값입니다. */
}

 

 

CSS calc() 함수는 CSS에서 수학적 계산을 할 때 매우 유용하다.
이 함수를 사용하면 반응형 웹 디자인에서 더욱 유연하고 다양한 효과를 구현할 수 있다.