Home
CSS
CSS 실전 예제

계산한 식의 결과를 속성값으로 사용하는 방법 - calc()

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 문법 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의

calc()

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.

 

예를 들어

font-size : calc( 10px + 10px );

는 글자 크기를 20px로 만듭니다.

 

문법

연산자

  • +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다.
  • 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다.
  • 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다.

 

계산 순서

  • 왼쪽에서 오른쪽으로 계산합니다.
  • 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 합니다.
  • 괄호가 있으면 괄호 안 부터 계산합니다.

 

예제

<p><b>width</b></p>
<div class="a">80%</div>
<div class="b">calc(80% - 20px)</div>
<div class="c">calc((40% * 2) - 40px / 2)</div>
<br/>
<p><b>font-size</b></p>
<div class="d">calc(4em / 3 + 5px)</div>
div {
  margin: 10px 0px;
  border: 1px solid #dadada;
}
.a {
  width: 80%;
}
.b {
  width: calc(80% - 20px);
}
.c {
  width: calc((40% * 2) - 40px / 2 );
}
.d {
  font-size: calc(4em / 3 + 5px);
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

Post a Comment