이 글은 CSS3의 calc()를 기술한 것입니다. 이 기능은 아직 Firefox의 어떤 소스 트리에도 추가되지 않았지만, 구현을 위한 작업이 진행중입니다.

Firefox는 CSS의 cals() 함수를 지원할 것인데 이 기능을 사용하면 산술 식을 통해 길이 값을 계산할 수 있습니다. 이 말은 div들의 크기나 마진 값, 경계(border)의 폭이나 그 외 여러가지의 크기를 정의할 때 산술 식을 사용할 수 있다는 것을 의미합니다.

다음은 calc() 함수 없이는 설정하기 어려운 레이아웃의 예입니다.

/*
* 두 개의 div가 1em 마진만큼 나뉘어져 배치됨
*/
#a {

  width:75%;
  margin-right: 1em;
}
#b {

  width: -moz-calc(25% - 1em);
}

다음은 input 텍스트 필드가 부모와 겹치지 않게 해 주는 예입니다.

input {
  padding:2px;
  border:1px solid black;

  display:block;
  width: -moz-calc(100% - 2 * 3px);

}

calc() 함수에서 특히 한가지 강력한 기능은 같은 계산에 대해서 다른 것들과 조합해서 사용할 수 있다는 것입니다.

width: -moz-calc(3px + 50%/3 - 3em + 1rem);

현재 구현 상으로는 +, -, *, /, mod, min, and max 연산자를 지원합니다.

앞으로 다음과 같은 방법으로 사용할 수 있는 min()과 max() 함수를 지원할 예정입니다.

div {
  height: -moz-min(36pt, 2em);

  width: -moz-max(50%, 18px);
}

더 자세한 정보는 다음을 참고하시기 바랍니다.

• Mozilla’s bug
• W3C’s reference

원저자: Paul Rouget – 원문으로 가기