Functions

Editing

polygon(<basic-shape-polygon>)

다각형을 생성한다.

설명

제대로 다각형을 형성하기 위하여 최소 3개 이상의 포인트에 대한 x, y 좌표를 나열하여야 한다.

매개 변수

polygon() 함수의 매개 변수 타입을 나타낸다.

  • CSS Shape Module Level 1
    <'fill-rule'>? , [<length-percentage> <length-percentage>]#

    <fill-rule>은 패스(path)의 내면을 결정하는 규칙을 나타내며 생략시 nonzero이다.

    [<length-percentage> <length-percentage>]#은 다각형의 포인트의 위치를 지정하는 n개의 x, y축의 좌표 목록을 나타낸다. 마지막 좌표는 첫 번째 x, y 좌표와 연결하여 자동으로 닫는다.

Details

포함된 타입

  • <'fill-rule'>

    DEVDIC-Specified Data Types

    SVG의 fill-rule 속성에 사용되는 타입이다.

    캔버스의 어떤 부분이 도형 안에 포함되는지 결정하는 데 사용되는 알고리즘(또는 굴곡 규칙)을 나타낸다.

    • Scalable Vector Graphics (SVG) 2
      nonzero | evenodd
    Details

    사용되는 키워드

    • evenodd

      Scalable Vector Graphics (SVG) 2

      이 규칙은 해당 지점에서 임의의 방향으로 무한대로 광선을 그리고 해당 광선이 교차하는 지정된 모양에서 경로 세그먼트의 수를 계산하여 갠버스에 있는 지점의 내면(insideness)을 결정한다. 이 숫자가 홀수이면 점(point)이 내부에 있고 짝수이면 외부에 있다.

    • nonzero

      Scalable Vector Graphics (SVG) 2

      이 규칙은 해당 지점에서 임의의 방향으로 무한대로 광선을 그린 다음 쉐입의 세그먼트가 광선과 교차하는 위치를 검사하여 캔버스에 있는 지점의 내면(insideness)을 결정한다. 0부터 시작하여 경로 세그먼트가 왼쪽에서 오른쪽으로 광선과 교차할 때마다 1을 더하고 경로 세그먼트가 오른쪽에서 왼쪽으로 광선과 교차할 때마다 1을 뺀다. 교차점을 계산한 후 결과가 0이면 점(point)이 경로 외부에 있고 그렇지 않으면 내부에 있다.

  • <length-percentage>

    <length><percentage> 타입을 나타낸다.

    • CSS Values and Units Module Level 3
      <length> | <percentage>
    Details

    포함된 타입

    • <length>

      숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

      • CSS Basic User Interface Module Level 4
        <length>
      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를 나타낸다.

      • fr

        그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

      • 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

        초를 나타낸다.

    • <percentage>

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

구문

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
CSS Shape Module Level 1Post pending
다각형을 생성하는 함수 테스트

외부 리소스

Polygon 코드 생성기

버전 명세

Modules
Module NameStatusSummary
CSS Shapes Module Level 1추천 후보

Last review date: 2023-5-17

지원 웹브라우저