CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성大全

CSS calc() 함수

calc() 이 CSS 함수는 CSS 속성 값을 설정할 때 계산을 수행하도록 합니다. 다음과 같은 경우에 사용할 수 있습니다: <length>、<frequency>、<angle>、<time>、<number> 또는 <integer>.

CSS 함수

온라인 예제

calc() 함수를 사용하여 <div> 요소의 너비를 계산하는 방법:

예제

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 가이드(oldtoolbag.com)</title>　
<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>
<p>화면을 가로지르는 div를 생성하며, div 양쪽에　50px　의 간격：</p>
<div　id="div1">一些文本...</div>
</body>
</html>

테스트를 보세요.‹/›

정의와 사용법

calc() 함수는 길이 값을 동적으로 계산하는 데 사용됩니다.

주의해야 할 것은 연산자 앞뒤에 공백을 유지해야 합니다. 예를 들어:width: calc(100% - 10px);
모든 길이 값은 calc() 함수를 사용하여 계산할 수 있습니다;
calc() 함수는 "+", "-", "*", "/" 연산;
calc() 함수는 표준 수학 연산 우선순위 규칙을 사용합니다;

지원 버전: CSS3

브라우저 호환성

표에 나타난 숫자는 이 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

"webkit" 또는 "moz" 또는 "o"가 지정한 숫자는 이 함수를 지원하는 첫 번째 버전 번호 프롬프트입니다.

함수
calc()	26.0 19.0　-webkit-	9.0	16.0 4.0　-moz-	7.0 6.0　-webkit-	15.0

CSS 문법

calc(expression)

값	설명
expression	필수, 수학 표현식이며, 연산 후 결과가 사용됩니다.

이 calc() 함수는 표현식을 매개변수로 사용하며, 표현식의 결과를 값으로 사용합니다. 이 표현식은 다음과 같은 연산자의 조합이 될 수 있으며, 표준 연산자 처리 규칙에 따라 간단한 표현식입니다. 예제: width: calc(100% - 80px);

CSS 함수

CSS @charset 규칙 CSS 함수(Functions)