정원을 생성한다.
정원 쉐입(shape)을 생성하는 circle()
함수의 매개 변수를 나타낸다. 생성될 원의 반지름과 중심을 설정한다.
<shape-radius>? [ at <position> ]?
<shape-radius>
는 생성될 원의 반지름을 나타낸다. 음수 값은 허용하지 않는다. <percentage>
값은 참조 상자의 사용된 너비와 높이에서 다음과 같이 결정된다.
sqrt(width2+height2)/sqrt(2)
<position>
는 생성될 원의 중심을 나타낸다. 생략하면 기본값은 중앙이다.
박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.
[left | center | right] || [top | center | bottom]
다음과 같이 값이 지정될 수 있다.
right
center top
[left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?
다음과 같이 지정될 수 있다.
right 10%
15% 100px
20%
[[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]
x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.
top 10% right -10px
<length>
와 <percentage>
타입을 나타낸다.
<length> | <percentage>
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0
(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height
속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height
속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%
를 나타낸다.
뷰포트 높이를 상대적으로 1%
높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%
를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1
초를 1000
으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
어떠한 기준으로 부터 백분율로 표현한다.
기준 위치를 아래쪽으로 한다.
중앙을 기준으로 한다.
기준 위치를 좌측으로 한다.
기준 위치를 우측으로 한다.
기준 위치를 상단으로 한다.
정원 또는 타원의 반지름을 나타낸다.
<length-percentage [0,∞]> | closest-side | farthest-side
<length>
와 <percentage>
타입을 나타낸다.
<length> | <percentage>
가장 가까운 쪽은 쉐입의 중심에서 참조 박스의 가장 가까운 쪽까지의 길이를 사용한다. 원의 경우 모든 차원에서 가장 가까운 면이다. 타원의 경우 반지름 치수에서 가장 가까운 면이다.
쉐입의 중심에서 참조 박스의 가장 먼 쪽까지의 길이를 사용한다. 원의 경우 모든 차원에서 가장 먼 쪽이다. 타원의 경우 반지름 차원에서 가장 먼 쪽이다.
clip-path: circle(40% at 60% 50%);
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Lists and Counters Module Level 3 | 초안 작업 | 목록 카운터와 관련된 스타일, 위치 지정 및 값을 조정하는 기능을 설명한다. Last review date: 2022-5-28 |