분류 css

CSS 및 JavaScript의 삼각법 : 삼각법 소개

컨텐츠 정보

  • 조회 14 (작성일 )

본문

이 시리즈 기사에서는 삼각법에 대한 개요를 살펴보고, 삼각법이 어떻게 유용 할 수 있는지 이해하고, CSS 및 자바 스크립트의 창의적인 응용 프로그램에 대해 알아 봅니다.


Trigonometry_01 


삼각법을 이해하면 창의적인 코딩과 관련하여 강력한 힘을 얻을 수 있습니다. 그러나 초심자에게는 약간 위협적인 것처럼 보일 수 있습니다. 3 부로 구성된 이 기사 시리즈에서는 삼각법에 대한 개요를 살펴보고, 삼각법이 어떻게 유용 할 수 있는지 이해하고, CSS 및 JavaScript의 창의적인 응용 프로그램에 대해 알아 봅니다.


삼각법 기초 


저처럼 교실 밖에서 삼각법을 거의 사용하지 않았다면 학교로 돌아가서 다시 알게 합시다.


삼각 함수를 사용하면 알려진 매개 변수에서 직각 삼각형의 알려지지 않은 값을 계산할 수 있습니다. 당신이 땅에 서서 키가 큰 나무를 바라보고 있다고 상상해보십시오. 땅에서 나무의 높이를 측정하는 것은 매우 어려울 것입니다.

그러나 우리가 나무 꼭대기를 바라 보는 각도를 알고 우리 자신과 나무 사이의 거리를 안다면 나무 자체의 높이를 추론 할 수 있습니다.


Diagram showing a person nearby a tree. The space between them forms a right-angled triangle. 


이 장면을 삼각형으로 상상하면 알려진 길이 (우리에서 나무까지)는 인접한 면, 나무는 반대쪽 (각도 반대), 가장 긴 면은 우리에서 꼭대기까지입니다. 나무는 빗변이라고 합니다.


Diagram of a right-angled triangle, with the names of the sides. 


사인, 코사인 및 탄젠트 


삼각법에서 기억해야 할 세 가지 주요 함수는 사인, 코사인 및 탄젠트 (sin, cos 및 tan의 약어)입니다. 다음 공식으로 표현됩니다.


sin(angle) = opposite / hypotenuse
cos(angle) = adjacent / hypotenuse
tan(angle) = opposite / adjacent

각도는 일반적으로 그리스 세타 (θ) 기호로 작성됩니다.


The three equations, shown as the acronym SOHCAHTOA 


이 방정식을 사용하여 알려진 삼각형으로부터 알려지지 않은 삼각형 값을 계산할 수 있습니다. 예제에서 나무의 높이를 측정하기 위해 각도 (θ)와 인접한 변을 알고 있습니다.


Showing the adjacent side of the triangle, from the person to the tree 


반대편을 계산하려면 탄젠트 함수가 필요합니다. 공식을 전환해야 합니다.


opposite = tan(angle) * adjacent

Triangle with question mark next to opposite side – the unknown side 


tan (θ)은 어떻게 얻습니까? 공학용 계산기 (황갈색을 입력 한 다음 각도를 입력)를 사용하거나 코드를 사용할 수 있습니다! Sass와 JavaScript에는 모두 삼각 함수가 포함되어 있으며,이 문서와 다음 항목에서 이러한 함수를 사용하는 몇 가지 방법을 살펴 보겠습니다.


Sass functions 


미리 정해진 값으로 작업하는 경우 Sass (CSS 전 처리기)에 내장 된 삼각 함수를 사용할 수 있습니다.


Math 모듈을 포함하려면 Sass 파일에 다음 줄이 필요합니다.


@use "sass:math";


변수를 사용하여 각도와 인접한 변 값에서 반대쪽을 계산할 수 있습니다.


$angle: 45deg;
$adjacent: 100%;
$opposite: math.tan($angle) * $adjacent;


Sass의 tan 함수는 라디안 또는 도를 사용할 수 있습니다.도를 사용하는 경우 단위를 지정해야 합니다. 단위가 없으면 기본적으로 라디안이 사용됩니다 (나중에 자세히 설명).


다음 데모에서는 나무의 높이를 계산하는 것과 유사하게 clip-path 속성에서 이를 사용하여 다각형 점의 좌표를 결정합니다.


https://codepen.io/michellebarker/pen/ff13392359ec56fb9641cbc95d9fdc9c


y 좌표를 얻으려면 요소의 높이에서 $ opposite 변수를 빼야 합니다. 클립 경로 좌표는 위에서 아래로 증가하는 y 축을 따라 그려지기 때문입니다.


.element {
	clip-path: polygon(0 100%, $adjacent (100% - $opposite), $adjacent 100%);
}

Showing the clipped triangle within the square box of the element. 


정삼각형 자르기 


직각 삼각형은 삼각법의 가장 간단한 사용입니다. 그러나 우리는 더 복잡한 모양의 좌표를 직각 삼각형으로 분할하여 계산할 수 있습니다.


정삼각형은 세 변의 길이가 같은 삼각형입니다. 학교에서 삼각형의 각이 180º가 된다는 사실을 기억하십니까? 즉, 정삼각형의 각 각도는 60º입니다.


An equilateral triangle. Each angle is 60 degrees 


정삼각형의 중앙에 선을 그리면 두 개의 직각 삼각형으로 나눕니다. 따라서 주어진 길이의 변을 가진 삼각형의 경우 각도 (60º), 빗변의 길이 및 인접한 변의 길이 (빗변 길이의 절반)를 알고 있습니다.


An equilateral triangle split into two right-angled triangles. 


우리가 모르는 것은 삼각형의 높이입니다. 다시 한 번 직각 삼각형의 반대쪽입니다. 클립 경로 좌표를 플로팅 하려면 이것이 우리가 해결해야 할 것입니다. 이번에는 빗변의 각도와 길이를 알고 있으므로 사인 ​​함수를 사용할 수 있습니다.


$hypotenuse: 60%; // side length
$angle: 60deg;
$opposite: math.sin($angle) * $hypotenuse;

(인접한 변의 길이가 빗변의 절반이라는 것을 알기 때문에 대신 접선 함수를 사용할 수도 있습니다.) 그런 다음 클립 경로 다각형 점에 해당 값을 사용할 수 있습니다.


.element {
	clip-path: polygon(
		0 $opposite,
		($hypotenuse / 2) 0,
		$hypotenuse $opposite
	);
}


https://codepen.io/michellebarker/pen/06024aa8411a238468392bf875d8ecf3


데모에서 볼 수 있듯이 요소는 왼쪽 상단 모서리에서 잘립니다. 이것은 완전히 만족스럽지 않을 수 있습니다. 특히 이미지를 자르는 경우 중앙에서 자르기를 원할 가능성이 더 큽니다. 그에 따라 클립 경로 좌표를 조정할 수 있습니다. 더 읽기 쉽게 하기 위해 인접한 변 길이 (빗변의 절반)와 삼각형의 시작 및 끝 위치에 대한 추가 변수를 할당 할 수 있습니다.


$hypotenuse: 60%; //side length
$angle: 60deg;
$opposite: math.sin($angle) * $hypotenuse;
$adjacent: $hypotenuse / 2;
$startPosX: (50% - $adjacent);
$startPosY: (50% - $opposite / 2);
$endPosX: (50% + $adjacent);
$endPosY: (50% + $opposite / 2);

.element {
	clip-path: polygon(
		$startPosX $endPosY,
		50% $startPosY,
		$endPosX $endPosY
	);
}


Triangle centrally positioned 


재사용을 위한 믹스 인 만들기 


이것은 단일 삼각형에 대해 작성하기에는 상당히 복잡한 코드입니다. Sass 믹스 인을 만들어서 원하는 요소에 모든 크기의 삼각형을 클립 할 수 있도록 하겠습니다. 일부 브라우저에서는 clip-path에 여전히 접두사가 필요하므로 mixin도 이를 다룹니다.


@mixin triangle($sideLength) {
	$hypotenuse: $sideLength;
	
	$angle: 60deg;
	$opposite: math.sin($angle) * $hypotenuse;
	$adjacent: $hypotenuse / 2;
	$startPosX: (50% - $adjacent);
	$startPosY: (50% - $opposite / 2);
	$endPosX: (50% + $adjacent);
	$endPosY: (50% + $opposite / 2);
	
	$clip: polygon(
				$startPosX $endPosY,
				50% $startPosY,
				$endPosX $endPosY
			);
	
	-webkit-clip-path: $clip;
	clip-path: $clip;
}

모든 요소에서 중앙 정삼각형을 자르려면 삼각형 변의 길이를 전달하는 믹스 인을 포함하기 만하면 됩니다.


.triangle {
	@include triangle(60%);
}


https://codepen.io/michellebarker/pen/9e446478a6e95b7462846cd479d4bcf7


Sass 함수의 한계 


Sass 함수 사용에는 몇 가지 제한 사항이 있습니다.


  1. $sideLength 변수가 컴파일 타임에 알려져 있으며 동적 값을 허용하지 않는다고 가정합니다.
  2. Sass는 우리가 필요로 하는 믹싱 장치를 잘 처리하지 못합니다. 마지막 데모에서 백분율 기반 측면 길이를 고정 길이 (예 : rems 또는 픽셀)로 전환하면 코드가 손상됩니다.

후자는 $startPos 및 $endPos 변수 (클립 경로를 중앙에 배치하기 위해)에 대한 계산이 백분율에서 측면 길이를 빼는 것에 의존하기 때문입니다. 일반 CSS (calc() 사용)와 달리 Sass는 이를 허용하지 않습니다. 마지막 데모에서는 잘린 요소의 크기를 매개 변수로 전달하여 유효한 길이 단위에 대해 작동하도록 믹스 인을 조정했습니다. 전달 된 두 매개 변수 값의 단위가 동일한 지 확인하기 만하면 됩니다.


https://codepen.io/michellebarker/pen/978253daa4c18f2f99616262b00ff0e9


CSS 삼각 함수 


CSS는 CSS Values ​​and Units Module Level 4 (현재 작업 초안)의 일부로 삼각 함수에 대한 제안을 가지고 있습니다. 특히 사용자 지정 속성과 함께 사용할 때 매우 유용 할 수 있습니다. 기본 CSS 삼각 함수를 사용하도록 CSS를 다시 작성하는 방법은 다음과 같습니다. 클립 경로의 크기를 변경하는 것은 단일 사용자 정의 속성을 업데이트하는 것만 큼 간단합니다.


.triangle {
	--hypotenuse: 8rem;
	--opposite: calc(sin(60deg) * var(--hypotenuse));
	--adjacent: calc(var(--hypotenuse) / 2);
	--startPosX: calc(var(--size) / 2 - var(--adjacent));
	--startPosY: calc(var(--size) / 2 - var(--opposite) / 2);
	--endPosX: calc(var(--size) / 2 + var(--adjacent));
	--endPosY: calc(var(--size) / 2 + var(--opposite) / 2);
	
	--clip: polygon(
				var(--startPosX) var(--endPosX),
				50% var(--startPosY),
				var(--endPosX) var(--endPosY)
			);
			
	-webkit-clip-path: var(--clip);
	clip-path: var(--clip);
}

.triangle:nth-child(2) {
	--hypotenuse: 3rem;
}

.triangle:nth-child(2) {
	--hypotenuse: 50%;
}


동적 변수 


사용자 지정 속성도 동적 일 수 있습니다. JS로 변경할 수 있으며 이에 의존하는 값은 자동으로 다시 계산됩니다.


triangle.style.setProperty('--hypotenuse', '5rem')


CSS 삼각 함수는 마침내 착륙했을 때 많은 잠재력을 가지고 있지만 슬프게도 아직 어떤 브라우저에서도 지원되지 않습니다. 지금 동적 변수와 함께 삼각법을 사용하려면 JavaScript가 필요합니다.


https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/