반응형웹 구축시 css calc() 활용팁

반응형웹은 이제 모든 웹페이지의 필수가 되어버린 것 같다... 최근 접하는 프로젝트의 거의 모든 웹페이지에서 사용되고 있기 때문이다.  부트스트랩이나 기타 반응형웹을 쉽게 구현 가능하도록 돕는 라이브러리등을 사용한다면 크게 고민하지 않을 수도 있지만 필자는 항상 어떻게 레이아웃을 잡을 것인지부터 매우 많은 부분들에 고민들이 함께하고 있다.

! 고정 영역을 함께 가지는 반응형웹

반응형웹은 어떤 요소가 가변 길이를 가지기 위해 css에서 길이를 정하는 경우 고정된 단위인 px, pt가 아닌 em, pecent(%)를 사용하게 된다. 물론 스크립트 언어를 사용해 항상 변하는 코드를 사용하기도 하지만 스크립트의 사용은 최대한 줄이면서 즉시 반응하는 웹페이지가 더 쉽고 유지보수에도 좋을 것이다.

두 개 또는 그 이상의 컬럼들이 하나의 row안에 존재하고 이들이 브라우저의 크기에 반응한다고 생각해보자. 각각의 컬럼들이 예를들어 각각 50%, 50%라면 width에 이 값을 설정하여 쉽게 코드 작성이 가능하다. 하지만 이 중 하나가 고정된 길이를 같는다면 어떻게 될까?

# 고정 길이는 필요한가?

만약 10% 정도의 길이를 가지는 컬럼이 존재한다고 생각해보자. 이 안에 배너광고 들어간다면 10%의 길이는 브라우저가 줄어들 경우 배너 광고가 매우 좁은 width를 가지게 될 것이며 이는 사용자가 보기에 매우  좋지 않게될 것이 자명하다... 이 경우 충분한 영역 확보가 필요할 수 있고 최소 200px은 되어야한다고 생각해보자. 이 경우 간단하게 해당 컬럼 길이를 200px로 정하고 나머지 컬럼은 200을 제외한 길이를 사용하면 될 것이다.

당연히 스크립트를 사용해 구현하면 어렵지 않겠지만 스크립트를 사용하지 않고 가능한 방법은 없을까?? 그 중 하나가 css의 calc()를 이용하는 것이다. calc()는 css에서 사용가능한 함수로 다양한 형태의 값을 계산할 수 있다. 그럼 아래의 예제를 보자.

! calc() 예제소스 보기

만약 전체 width 100%에서 50px을 제외한 길이만큼 영역 지정을 하고 싶다. 이 경우 어떻게 해야할까? 고정된 영역에서 50px을 빼거나 더하는 것은 간단하지만 반응형웹에서는 상대적인 단위를 사용하기 때문에 %, em 등의 수치에 px, pt를 계산해야만 한다. 물론 앞에서 언급한 것처럼 스크립트를 사용하는 방법이 있겠지만 css의 calc()를 이용할 경우 이런 고민들은 사라지게 된다. 아래는 그 해법이다.


매우 간단한 방법으로 우리가 원하는 width를 사용할 수 있게되었다. 만약 calc()를 사용하지 않는 경우 css를 사용한 다양한 꼼수(?)들이 존재하지만 IE8을 지원하지 않는 상황이라면 이 방법이 가장 최선의 방법이 될 수 있다. 물론 width 속성 뿐 아니라 height, padding 등등의 모든 css가 선언된 곳에 calc()를 사용한 수치를 입력할 수 있다. 매우 편리한 방법이 아닌가?


위와 같은 코드는 반응형웹을 구현할 경우 브라우저의 크기가 늘어나거나 줄어들 경우 일정 영역만큼을 뺀 나머지를 반환해 적용하는 방법의 최선책이라 할 수 있다. 한 가지 예를 들자면 위에 언급한 꼼수의 방법으로 position 속성을 absolute를 사용하거나 float 속성을 강제로 주는 방법이 사용되기도 한다. 이 경우 실제 높이가 부모 요소에 반영되지 않는 경우가 나타날 수 있어 내부 콘텐츠가 다른 요소에 있는 콘텐츠보다 작은 경우 제대로 보여지지 않는 경우가 생길수도 있다... 하지만 위 코드는 모든 요소의 실제 길이를 사용한... 즉 꼼수의 위험으로부터 벗어날 수 있는 방법이다.