[func] CSS - calc() 함수 ★ - 계산 수행해 CSS 속성값 결정. (= calc함수 = 길이계산 = 계산값얻기 = 수식계산 = 캘크함수)

calc() 예제

 

<style>

#hz {

  position: absolute;

  top: calc(50% - 50px);

  left: calc(50% - 130px);

  width:200px;

  border: 1px solid black;

  background-color: yellow;

  padding: 30px;

  text-align: center;

}

</style>

 

<div id="hz">홈짱닷컴 Homzzang.com</div>

 

결과보기

calc() 정의

 

계산 수행해 CSS 속성값 결정. (= 길이계산 = 계산값얻기 = 수식계산)

 

---

 

1.
계산식 부호 앞뒤로 공백 필수

 

2.

CSS3

3.

IE9 이상 지원. 단, 구 브라우저 경우 접두어 필요.

-wetkit- : 크롬, 사파리

   -mox- : 파이어폭스

     -o-   : 오페라

(예제)

height:           calc(100% - 18px); 

height: -webkit-calc(100% - 18px);

height:   -moz-calc(100% - 18px);

height:        -o-calc(100% - 18px);

 

calc() 구문

 

calc(expression) (예) calc(OO% - OOpx)

 

---

[매개변수]

expression

필수. 수학 수식. 결과값이 값으로 사용됨. 
+  ,  -  ,  *  ,  /  부호 사용 가능. 부호 앞뒤는 공백 필요.

PS.
사용 가능 4칙연산 부호 : 
+  (덧셈・더하기)
-  (뺄셈・빼기)
*  (곱셈・곱하기)
/  (나눗셈・나누기)