Editing
cos(<arg-trigonometric>)
코사인(cosine)을 계산하는 삼각 함수이다.
설명
cos()
함수는 항상 -1
에서 1
사이의 숫자를 반환한다.
매개 변수
삼각 함수 cos()
, sin()
, tan()
의 매개 변수 타입을 나타낸다.
CSS Values and Units Module Level 4
cos(45deg)
sin(45deg)
tan(45deg)
cos(0.125turn)
sin(0.125turn)
tan(0.125turn)
cos(calc(3.14159 / 4))
sin(calc(3.14159 / 4))
tan(calc(3.14159 / 4))
Details
포함된 타입
0~360도 범위의 각도 값을 deg
(도), grad
(그레이드), rad
(라디안), turn
(턴) 단위로 표현한다.
<angle>
데이터 타입은 <number>
타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0
인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +
, -
부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
Details
사용되는 단위
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
관련 함수
모든 함수를 표시하지 않을 수도 있다.
예제
45도 회전된 요소의 크기 조정 샘플
cos()
함수는 회전된 요소의 크기를 래퍼(wrapper) 요소 안에 유지하는 데 활용될 수 있다. 가로, 세로 크기가 100px
인 요소가 45deg
회전되면 래퍼는 수용 크기가 늘어나야 한다. 만약에 이것을 방지하고자 한다면 회전되는 요소의 크기를 cos()
함수로 재정의하면 된다.
width: calc(100px * cos(45deg));
height: calc(100px * cos(45deg));
결과적으로 다음과 같은 공식이 성립된다.
100px * cos(45deg) = 100px * 0.707 = 70.7px
기술 문서
삼각법
기준 길이를 B라고 할 경우 θ
(각도)에 따라 다음과 같이 각 변의 길이를 삼각법에 따라 유추할 수 있다.
A = sin(θ) * B
H = tan(θ) * B
O = tan(θ) * A
지원 웹브라우저