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