CSS calc()의 용도는 무엇입니까?

css calc()는 길이 값을 동적으로 계산하는 데 사용됩니다. 이 함수를 사용하면 ".foo { width: calc(100px + 50px);}"와 같은 구문을 사용하여 수학적 연산을 수행할 수 있습니다. 요소 너비의 고정 픽셀 값은 여러 값의 합계입니다.

권장: "css 비디오 튜토리얼"

css3의 calc() 함수는 길이 값을 동적으로 계산하는 데 사용됩니다.

calc() 함수를 사용하면 속성 값에 대해 수학적 연산을 수행할 수 있습니다. 예를 들어, calc()를 사용하여 요소 너비에 대한 고정 픽셀 값을 여러 값의 합으로 지정할 수 있습니다.

.foo {  width: calc(100px + 50px);
}

참고:

• 연산자 앞뒤에 공백을 예약해야 합니다. 예: width: calc(100% - 10px)

• 모든 길이 값은 다음을 사용하여 처리할 수 있습니다. calc() 함수 계산;

• calc() 함수는 "+", "-", "*", "/" 연산을 지원합니다.

• calc() 함수는 표준 수학 연산 우선순위 규칙을 사용합니다.

SASS와 같은 CSS 전처리기를 사용했다면 위의 예를 접했을 수도 있습니다

.foo {
    width: 100px + 50px;
}
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

그러나 calc() 함수가 더 나은 솔루션을 제공합니다. 첫째, 다양한 유닛을 결합할 수 있습니다. 특히 절대 단위(예: 백분율 및 뷰포트 단위)와 상대 단위(예: 픽셀)를 사용하여 계산을 혼합할 수 있습니다. 예를 들어, 백분율에서 픽셀 값을 빼는 표현식을 만들 수 있습니다.

.foo {    width: calc(100% - 50px);
}

이 예에서 .foo 요소는 항상 상위 요소의 너비보다 50px 더 작습니다.

둘째, calc()를 사용하면 계산된 값은 표현식의 결과가 아니라 표현식 자체입니다. CSS 전처리기를 사용하여 수학 연산을 수행할 때 주어진 값은 표현식의 결과입니다.

.foo {    width: 100px + 50px;
}.foo {    width: 150px;
}

그러나 브라우저는 calc()의 값을 실제 calc() 표현식으로 구문 분석합니다.

.foo {    width: calc(100% - 50px);
}.foo {    width: calc(100% - 50px);
}

이는 브라우저의 값이 뷰포트의 변경 사항에 더 유연하고 반응할 수 있음을 의미합니다. 뷰포트의 높이에서 절대값을 뺀 요소의 높이를 설정할 수 있으며 뷰포트가 변경되면 높이가 조정됩니다.

calc() 함수를 사용하면 숫자 속성에 대해 네 가지 산술 연산을 수행할 수 있습니다. 예를 들어, , , , , 또는 데이터 유형입니다.

다음은 몇 가지 예입니다.

.foo {    width: calc(50vmax + 3rem);    padding: calc(1vw + 1em);    transform: rotate( calc(1turn + 28deg) );    background: hsl(100, calc(3 * 20%), 40%);    font-size: calc(50vw / 3);
}

calc() 함수는 중첩될 수 있습니다. 함수 내에서는 다음 예제와 같이 간단한 대괄호 표현식으로 처리됩니다.

.foo {    width: calc( 100% / calc(100px * 2) );
}

함수의 계산된 값은 다음과 같습니다.

.foo {    width: calc( 100% / (100px * 2) );
}

clac()가 일반적으로 지원되었습니다.

calc()를 지원하지 않는 브라우저의 경우 전체 속성 값 표현식이 무시됩니다. 그러나 calc()를 지원하지 않는 브라우저에 대한 대체 솔루션으로 고정 값을 사용할 수 있습니다.

.foo {    width: 90%; 
    width: calc(100% - 50px);
}

사무실 리소스 웹사이트 https://www.wode007.com

calc()를 사용하면 수직 중앙에 있는 요소에 대한 또 다른 솔루션이 제공됩니다. 요소의 크기를 알고 있는 경우 일반적인 해결책은 아래와 같이 음수 여백을 사용하여 높이와 너비 사이 거리의 절반으로 이동하는 것입니다.

.foo {    position: absolute
    top: 50%;    left: 50%;    marging-top: -150px;    margin-left: -150px;
}

calc() 함수를 사용하면 다음과 같이 동일한 작업을 수행할 수 있습니다. 상단 및 왼쪽 속성 효과:

.foo {    position: absolute
    top: calc(50% - 150px);    left: calc(50% - 150px);
}

Flexbox의 개입으로 이 방법은 더 이상 필요하지 않습니다. 그러나 Flexbox를 사용할 수 없는 상황이 있습니다. 예를 들어, 이 방법은 요소의 위치를 ​​절대적으로 지정해야 하거나 고정적으로 배치해야 하는 경우 유용합니다.

rem을 사용하면 calc() 함수를 사용하여 뷰포트 기반 래스터를 생성할 수 있습니다. 루트 요소의 글꼴 크기를 뷰포트 너비의 일부로 설정할 수 있습니다.

html {  
    font-size: calc(100vw / 30);
}

이제 1rem은 뷰포트 너비의 1/30입니다. 페이지의 모든 텍스트는 뷰포트에 따라 자동으로 크기가 조정됩니다. 또한 동일한 비율의 뷰포트는 뷰포트의 실제 크기에 관계없이 항상 동일한 양의 텍스트를 표시합니다.

rem을 사용하여 텍스트가 아닌 크기를 설정하는 경우에도 이 동작을 따릅니다. 1rem 너비 요소는 항상 뷰포트 요소 너비의 1/30입니다.

마지막으로 calc()를 사용하면 계산이 더욱 명확해집니다. 항목 그룹을 상위 요소 컨테이너 너비의 1/6로 만든 경우 다음과 같이 작성할 수 있습니다.

.foo {    width: 16.666666667%;
}

그러나 더 명확하고 읽기 쉬울 수 있습니다.

.foo {    width: calc(100% / 6);
}

calc()를 사용하면 더 많은 작업을 수행할 수 있습니다. 그리드 시스템을 만드는 것과 같은. CSS의 가장 유용한 새로운 기능 중 하나입니다.

위 내용은 CSS calc()의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!