Functions

Editing

atan2(<arg-atan2>)

-infinity(음수 무한대)와 infinity(양수 무한대) 사이의  두 값의 역탄젠트(atan)를 계산한다.

설명

atan2() 함수는 두 개의 인수(y, x)를 계산하여 양의 x축과 원점에서 점(x, y)까지의 광선(ray) 사이의 <angle>([-180deg, 180deg] 범위)을 라디안(radian)으로 반환한다.

atan2(Y, X)는 일반적으로 atan(Y / X)와 동일하지만 점의 위치가 음수가 포함된 경우 atan2() 함수가 더 나은 답을 제공한다. atan2(1, -1)은 점(-1, 1)에 해당하는 135deg를 반환하고atan2(-1, 1)은 점(1, -1)에 해당하는 -45deg를 반환한다.

반면 atan(1 / -1)atan(-1 / 1)은 모두 내부 계산이 -1로 연산되므로 -45deg를 반환한다.

매개 변수

atan2() 함수를 사용하기 위한 매개 변수의 유형을 나타낸다.

  • CSS Values and Units Module Level 4
    [<number> | <dimension> | <percentage>]#{2}

    콤마로 구분된 두 개의 값이 필요하다. <number>, <dimension>, <percentage> 중에서 선택할 수 있으나 두 개의 값 유형이 모두 동일해야 한다. 단 <dimension> 값은 다른 단위일 경우에도 유효하다.(예: atan2(100px, 3vw))

    첫 번째 값은 점의 y 좌표이며 두 번째 값은 점의 x 좌표이다.

Details

포함된 타입

  • <dimension>

    단위로 연결된 <number> 타입을 나타낸다. <length>, <angle>, <time>, <resolution>를 포함하는 상위 개념이다.

    Details

    사용되는 단위

    아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

    • cm

      1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

    • in

      1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

    • mm

      1cm의 1/10 값을 나타낸다.

    • pc

      1in의 1/16 값을 나타낸다.

    • pt

      1in의 1/72 값을 나타낸다.

    • px

      스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

    • Q

      1cm의 1/40을 나타낸다.

    • deg

      보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

    • grad

      400grad(그라디안)은 완전한 원을 만든다.

    • rad

      2π(라디안)이 완전한 원을 만든다.

    • turn

      1turn(턴)이 완전한 원을 만든다.

    • cap

      대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

    • ch

      글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

    • em

      대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

    • ex

      대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

    • ic

      한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

    • lh

      요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

    • rem

      html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

    • rlh

      html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

    • Hz

      1초당 발생한 진동수를 나타낸다.

    • kHz

      1000Hz를 나타낸다.

    • vb

      html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vh

      뷰포트 높이를 상대적으로 1% 높이를 갖는다.

    • vi

      html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vmax

      vw 또는 vh 중 큰 값을 나타낸다.

    • vmin

      vw 또는 vh 중 작은 값을 나타낸다.

    • vw

      뷰포트 너비를 상대적으로 1% 폭을 갖는다.

    • dpcm

      1cm당 점(dot)의 수를 나타낸다.

    • dpi

      1in당 점(dot)의 수를 나타낸다.

    • dppx

      1픽셀(pixel)당 점(dot)의 수를 나타낸다.

    • ms

      1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

    • s

      초를 나타낸다.

  • <number>

    정수 또는 실수를 표현한다.

  • <percentage>

    어떠한 기준으로 부터 백분율로 표현한다.

예제

마우스 포인터의 위치를 x, y 값으로 사용하여 요소의 회전을 확인하는 심플 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Values and Units Module Level 4초안 작업

CSS 속성이 허용하는 공통 값, 단위와 CSS 속성 정의에서 이를 설명하는 데 사용되는 구문을 설명한다.


Last review date: 2022-5-28

지원 웹브라우저