CSS
기능들

통사론

• <calc()> = calc( <calc-sum> )
• <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
• <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
• <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

비고

calc () 함수

수식을 수락하고 숫자 값을 반환합니다.

속성의 값을 계산하기 위해 여러 유형의 단위 (예 : 백분율에서 px 값 빼기)로 작업 할 때 특히 유용합니다.

+ , - , / 및 * 연산자를 모두 사용할 수 있으며 필요한 경우 작업 순서를 지정하기 위해 괄호를 추가 할 수 있습니다.

calc() 를 사용하여 div 요소의 너비를 계산합니다.

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

calc() 를 사용하여 배경 이미지의 위치를 ​​결정합니다.

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

calc() 를 사용하여 요소의 높이를 결정합니다.

height: calc(100% - 20px);

attr () 함수

선택한 요소의 특성 값을 반환합니다.

다음은이 함수를 사용하여 CSS가 사용할 수있는 data-* 속성 안에 문자를 포함하는 blockquote 요소입니다 (예 : ::before 및 ::after 가상 엘레멘트 내부 ).

<blockquote data-mark='"'></blockquote>

다음 CSS 블록에서 문자는 요소 내부의 텍스트 앞뒤에 추가됩니다.

blockquote[data-mark]::before,
blockquote[data-mark]::after {
    content: attr(data-mark);
}

선형 - 그래디언트 () 함수

색상의 선형 그래디언트를 나타내는 이미지를 만듭니다.

linear-gradient( 0deg, red, yellow 50%, blue);

이것은 아래에서 위로가는 그라디언트를 만듭니다. 색상은 빨간색에서 시작하여 50 %에서 노란색으로, 파란색으로 마무리됩니다.

방사형 그라디언트 () 함수

그라디언트의 중앙에서 복사되는 색상 그라디언트를 나타내는 이미지를 만듭니다.

radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/

var () 함수

var () 함수를 사용하면 CSS 변수에 액세스 할 수 있습니다.

/* set a variable */
:root {
    --primary-color: blue;
}

/* access variable */
selector {
    color: var(--primary-color);
}

이 기능은 현재 개발 중입니다. caniuse.com 에서 최신 브라우저 지원을 확인하십시오.