CSS3의 calc함수를 이용해서 속성값 계산하기

CSS를 이용한 반응형 웹 프레임을 만들거나 수정할 때, 각 부분별 폭을 고정값이 아닌 계산식을 이용해야 할 필요가 생긴다. 예를 들어 3 Column의 경우 왼쪽의 폭은 고정시키고 나머지를 브라우저 폭에 따라 변화시키고 일정 폭 이하로 브라우저의 폭이 줄어들 때에 비로서 그 고정시킨 Column을 사라지게 하거나 밑으로 내려버린다던지 할 때, CSS에서 계산식이 필요하게 된다. 구식 브라우저에서는 자바스크립트로 하던 계산을 이용하거나, 아예 계산식을 포기하고 브라우저 폭의 비율로 세팅해야 하는 어려움이 있으나, 비교적 최신 브라우저에 대해서는 CSS3의 CALC( ) 기능을 이용해서 비교적 자유롭게 Column의 폭을 잡을 수 있다. 아무래도 자바스크립트는 반응이 한 템포 느리게 적용되기 때문에 CSS3의 CALC( )기능을 이용한 반응형 웹의 디자인은 합리적이고 유용하다고 볼 수 있다.


CSS3 CALC함수

요소의 폭을 계산해주는 기능


CALC함수의 적용은 그다지 복잡하지 않다. 예를 들어 해당 DIV의 폭을 100%에서 50px 뺀 너비로 설정하고 싶은 경우에는 아래와 같이 설정하면 된다.

DIV {
width : 90%; / * CSS3를 지원하지 않는 예전 브라우저를 위한 설정 * /
width : -webkit-calc(100% - 50px); / * 크롬 브라우저와 사파리 * /
width : -moz-calc(100% - 50px); / * 파이어폭스 * /
width : calc(100% - 50px); / * 인터넷 익스플로러 * /
}

CSS3의 calc함수 내부에서 사용될 수 있는 표현식은 기본적인 사칙연산 (+, -, *, /)이 가능한데, 여기서 가장 조심해야 할 점은 사칙연산 기호 앞뒤로 공백을 넣어줘야 한다는 것이다. 그리고 calc함수는 기본적으로 잘못된 결과에 대한 보정기능을 내포하고 있는데, 예를 들어서 width값이 음의 숫자가 나온다면 자동으로 0px로 결과값을 도출한다.

하지만 이 calc함수를 남용해서는 안되는 중요한 이유가 있는데, 같은 요소에 대해서 calc를 이용한 속성정의는 두 번이상 적용될 수 없는 경우가 크롬 21버전까지에서는 발생하였다. 물론 버전22부터는 이런 현상이 없어졌다고는 하나, CSS를 사용하는 디자이너나 개발자의 입장에서는 굳이 속성 클래스가 중첩되고 그에 따라 의도하지 않은 calc함수 적용이 두 번 이상 겹쳐지게 하는 것은 바람직하지는 않은 것이다. CSS를 쓰다보면 클래스가 꼬이고 겹쳐지게 되어서 나중에는 !important를 덕지덕지 발라가며 겨우 의도한 디자인이 구현되게 하는 경우도 생기는데, 기본적으로 이런 부분을 줄이게 노력하는 것이 중요한 것이 아닌가 생각한다.

사람의 생각을 대신해 주는 서비스는 언제 나올까?

    이미지 맵

    배우자! IT/Web, App 다른 글

    이전 글

    다음 글