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

1. calc() 예제 - 길이 계산
2. calc() 정의
3. calc() 구문
4. 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 이상 주요 최신 브라우저 지원. 

단, 구 브라우저 경우 접두어 필요.

-webkit- : 크롬, 사파리

   -moz- : 파이어폭스

     -o-   : 오페라

(예제)

height:           calc(100% - 18px); 

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

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

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

 

4.

안긴 calc() 함수 : IE 제외한 주요 최신 브라우저 모두 지원.

(예) calc(calc(100% + 20px) - 10px)

 

calc() 구문

 

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

 

---

[매개변수]

expression

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

※ 사용 가능 4칙연산 부호 : 

• +  (덧셈・더하기)
• -  (뺄셈・빼기)
• *  (곱셈・곱하기)
• /  (나눗셈・나누기)

 

calc() 예제 - 안긴 형태 (= 함수 중첩 사용)

 

<style>

#hz {

  width:calc(calc(300px - 30px) - 20px);

  border:1px solid;

}

</style>  

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

 

결과보기