멋진 CSS 레이아웃을 만들려면 먼저 웹 애플리케이션에 배치되는 모든 항목의 크기를 할당해야 합니다. 많은 요청이 있었던 기능 중 하나는 항상 혼합된 크기 단위를 사용하여 크기를 지정하는 기능입니다. 예를 들어 영역의 50% 와 고정된 공간(예: 10픽셀)을 예약할 수 있는 것이 좋습니다. calc() 속성을 사용하여 지금 바로 할 수 있습니다. 이 기능은 길이나 숫자가 사용되는 곳이면 어디서나 사용할 수 있으므로 항목을 배치하거나 rgb() 색상 값에도 사용할 수 있으므로 스타일 시트에서 다양하게 활용할 수 있습니다.
calc()로 무엇을 할 수 있나요?
calc() 속성은 스타일시트에서 CSS 길이 또는 숫자가 있는 곳이면 어디에나 사용할 수 있습니다.
이 API는 레이아웃을 더 유연하게 만들 수 있는 두 가지 주요 기능을 제공합니다.
- 백분율과 절댓값을 혼합하여 사용합니다.
- 크기 조정 단위가 혼합되어 있습니다.
백분율을 절대 단위와 혼합
백분율과 절대 단위를 혼합하는 예를 살펴보겠습니다. 사용 가능한 영역의 50% 에 고정된 픽셀 수를 덜 할당한다고 가정해 보겠습니다. 이 경우 다음과 같이 작성할 수 있습니다.
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
배경색이 녹색인 경우 다음과 같이 표시됩니다.
상위 크기를 줄이면 다음과 같이 표시됩니다.
여기서 좋은 점은 콘텐츠의 오른쪽 가장자리가 포함 영역의 중앙에서 100픽셀 왼쪽이라는 것을 항상 알고 있다는 것입니다. 이런 식으로 다양한 값 유형을 결합할 수 있으면 웹 애플리케이션이 다양한 크기의 기기에서 이전보다 훨씬 더 잘 제어할 수 있는 레이아웃을 처리할 수 있습니다.
혼합 단위
또 다른 장점은 다양한 측정값과 단위를 결합하여 결과 크기를 얻을 수 있다는 것입니다. 예를 들어 'em'과 'px' 단위를 혼합하여 현재 글꼴 크기를 기준으로 크기를 설정할 수 있습니다.
#bar {
height: calc(10em + 3px);
}
여기와 여기에서 값을 결합한 좋은 예를 확인할 수 있습니다.
사용해 보기
calc()를 사용하면 +, -, *, /를 사용하여 값을 더하고 빼고 곱하고 나눌 수 있으므로 모든 종류의 가능성이 허용됩니다. CSS 길이 또는 숫자를 사용할 수 있는 곳이면 어디에나 calc()를 사용할 수 있습니다. 또한 각도 및 주파수 속성에 calc()를 추가하기 위해 노력하고 있습니다. 길이의 calc() 속성은 이제 Chrome 19 (개발자 채널 빌드)에서 -webkit-calc 속성을 사용하여 사용할 수 있으며, Firefox에서는 -moz-calc 속성을 사용합니다. 버전 8부터, Internet Explorer에서는 버전 9의 접두어가 없습니다. 아래에 댓글로 의견을 남겨주세요.