Functions

Editing

circle(<basic-shape-circle>)

정원을 생성한다.

매개 변수

정원 쉐입(shape)을 생성하는 circle() 함수의 매개 변수를 나타낸다. 생성될 원의 반지름과 중심을 설정한다.

  • CSS Shape Module Level 1
    <shape-radius>? [ at <position> ]?

    <shape-radius>는 생성될 원의 반지름을 나타낸다. 음수 값은 허용하지 않는다. <percentage> 값은 참조 상자의 사용된 너비와 높이에서 다음과 같이 결정된다.

    sqrt(width2+height2)/sqrt(2)

    <position>는 생성될 원의 중심을 나타낸다. 생략하면 기본값은 중앙이다.

     

Details

포함된 타입

  • <position>

    박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.

    • CSS Backgrounds and Borders Module Level 3
      [left | center | right] || [top | center | bottom]

      다음과 같이 값이 지정될 수 있다.

      right
      center top
    • CSS Backgrounds and Borders Module Level 3
      [left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?

      다음과 같이 지정될 수 있다.

      right 10%
      15% 100px
      20%
    • CSS Backgrounds and Borders Module Level 3
      [[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]

      x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.

      top 10% right -10px
    Details

    포함된 타입

    • <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>

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

    사용되는 키워드

    • bottom

      CSS Values and Units Module Level 4

      기준 위치를 아래쪽으로 한다.

    • center

      CSS Values and Units Module Level 4

      중앙을 기준으로 한다.

    • left

      CSS Values and Units Module Level 4

      기준 위치를 좌측으로 한다.

    • right

      CSS Values and Units Module Level 4

      기준 위치를 우측으로 한다.

    • top

      CSS Values and Units Module Level 4

      기준 위치를 상단으로 한다.

  • <shape-radius>

    정원 또는 타원의 반지름을 나타낸다.

    • CSS Shape Module Level 1
      <length-percentage [0,∞]| closest-side | farthest-side
    Details

    포함된 타입

    • <length-percentage>

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

      • CSS Values and Units Module Level 3
        <length> | <percentage>
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<length-percentage>]

    사용되는 키워드

    • closest-side

      가장 가까운 쪽은 쉐입의 중심에서 참조 박스의 가장 가까운 쪽까지의 길이를 사용한다. 원의 경우 모든 차원에서 가장 가까운 면이다. 타원의 경우 반지름 치수에서 가장 가까운 면이다.

    • farthest-side

      쉐입의 중심에서 참조 박스의 가장 먼 쪽까지의 길이를 사용한다. 원의 경우 모든 차원에서 가장 먼 쪽이다. 타원의 경우 반지름 차원에서 가장 먼 쪽이다.

구문

clip-path: circle(40% at 60% 50%);
CSS Shape Module Level 1
원을 생성하는 함수 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Lists and Counters Module Level 3초안 작업

 목록 카운터와 관련된 스타일, 위치 지정 및 값을 조정하는 기능을 설명한다.


Last review date: 2022-5-28

지원 웹브라우저