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