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에서만 가능한 방법이라 실무에 적용하기는 다소 어려울 듯 합니다. ^^;
'[IT] Web Tech' 카테고리의 다른 글
CSS만으로 아이폰 아이콘 만들기 (1) | 2010.06.29 |
---|---|
파이어폭스, 플러그인 오류 보호를 도입하다. (1) | 2010.06.25 |
HTML5를 배우고 싶다면? HTML5Rocks.com! (2) | 2010.06.24 |
MagnifyMa : CSS 돋보기 (1) | 2010.06.17 |
CSS calc() (2) | 2010.06.16 |
IE6를 퇴출시키는 치사한 방법 - amelie() (0) | 2010.06.07 |
배열과 객체에 SQL 질의를 하는 두 가지 방법 (0) | 2010.06.05 |
ShowSlow : 페이지 속도를 모니터링하는 도구 (0) | 2010.06.04 |
CSS3와 Canvas로 어항만들기 (2) | 2010.06.03 |
댓글을 달아 주세요
이거 좋은데요!
다른 브라우저들에서도 다 지원해준다면 삽질이 엄청 줄겠네요.
다른 브라우저에서도 잘 지원됐으면 정말 좋겠습니다. ^^;;