잇스쿨

calc() : 속성 값 계산한 결과 적용하는 함수 본문

퍼블리싱/CSS

calc() : 속성 값 계산한 결과 적용하는 함수

잇님 2019. 4. 2. 14:29

calc()

: 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수

 

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The calc() Function</h1>

<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>

<div id="div1">Some text...</div>

</body>
</html>

 

위의 코드 예시의 width: calc(100% - 100px); 처럼 css에서 정의하면

브라우저 크기가 줄어들 때마다 해당 함수가 자동적으로 계산한 값을 width에 적용

 

 

사용법

  • 사칙 연산이 가능 (곱셈은 *, 나눗셈 / 기호 사용)
  • 곱셈, 나눗셈은 공백이 필요x
  • 덧셈, 뺄셈의 좌우에는 공백이 필요 (ex. 100% - 200px)
  • 왼쪽에서 오른쪽으로 계산
  • 사칙연산과 동일하게 곱셈과 나눗셈이 먼저 계산되며, 덧셈과 뺄셈은 후에 계산
  • 괄호가 존재하면 괄호 안부터 계산

 

Version

CSS3

 

 

브라우저 지원

Chrome Edge Firefox Safari Opera
26.0
19.0 -webkit-		 9.0 16.0
4.0 -moz-		 7.0
6.0 -webkit-		 15.0
저작자표시 비영리 변경금지

'퍼블리싱 > CSS' 카테고리의 다른 글

svg 사용하기  (0) 2020.08.05
[CSS] word-break, word-wrap 속성  (0) 2020.07.09
[CSS] text-overflow 텍스트 긴 글 생략 기호로 표시  (0) 2019.04.01
css / clip 속성  (0) 2019.03.29
상태 선택자(checked, focus, enabled, disabled)  (0) 2019.03.29
'퍼블리싱/CSS' Related Articles more