CSS calc()

2010.06.16 08:40 from [IT] Web Tech

CSS에서 상대적인 크기 계산을 위해 자바스크립트를 사용해본 기억이 있을 것입니다. 예를 들어, '절반(50%)에서 5px 뺀 너비' 등과 같이 말이죠. 하지만, 이젠 그럴 필요가 없게 됐습니다.

Paul Roget씨가 CSS calc()에 대해서 설명해주셨습니다. CSS calc()는 아직 버그가 있는 상태입니다.

다음은 간단한 사용예입니다.
[code:css]
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}
/*
 * Make sure input field won't overlap parent
 */
input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}

/*
 * combine different units!
 */

width: -moz-calc(3px + 50%/3 - 3em + 1rem);
이 덕분에 상당히 많은 자바스크립트를 줄일 수 있게 되었습니다. 하지만, Firefox에서만 가능한 방법이라 실무에 적용하기는 다소 어려울 듯 합니다. ^^;

from CSS calc() in the house
Posted by 행복한고니 트랙백 1 : 댓글 2