CSS3의 새로운 속성 calc()에 대한 자세한 소개

1. 소개

　Calc()는 javascript의 함수처럼 보이지만 실제로는 CSS에서 길이(너비 또는 높이)를 계산하는 데 사용되며 자동으로 계산됩니다. 다양한 화면 크기에 따라 값을 조정하여 다양한 화면 크기에 적응형 레이아웃 표시를 쉽게 구현할 수 있습니다. 프로젝트에서 우리는 항상 중앙에 위치해야 하는 요소를 자주 접하게 됩니다. 물론 가장 먼저 떠오르는 것은 margin: 0 auto; 또는 위치 지정과 여백을 결합한 간단한 방법을 사용하는 것입니다. 계산을 공부하려면 그래야만 CSS3의 새로운 기능을 실제로 이해할 수 있습니다.

2. 사용 방법

　calc()의 매개변수는 계산식입니다. 이 계산식을 통해 너비와 값을 계산하는 작업이 다양한 크기의 브라우저에 전달되므로 페이지에서 계산할 수 있습니다. 결론적으로 이러한 계산식은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)의 매우 간단한 연산이기도 합니다.

p{
    width: calc(15px + 15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px}

　위의 예를 보면 덧셈(+) 뺄셈(-) 연산에서 계산할 값과 연산자 사이에 공백이 있고, 이 공백은 생략할 수 없으며, 곱셈( * ) 나누기( / ) 연산에서 공백은 생략 가능합니다.

　calc()의 표현식은 백분율, px, em, rem 등과 같은 단위를 사용하여 계산할 수 있으며, 단위를 혼합하여 계산할 수도 있습니다:

p{
    width: calc(3em + 5px);//53px}

3. 　calc( )는 함수이므로 이 함수는 중첩을 지원할 수 있으며 최종 결과는 다양한 공식을 통해 계산될 수 있습니다.

p{
    --widthA: calc(10px + 190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

calc()가 너비를 계산한 후

이나 여백 등 센터링 표시를 구현하는 방법은 여러 가지가 있지만 원리는 동일합니다.

p{
    padding: 0 calc((100% - 1024px)/2);
}