보석같은 CSS3 함수 calc()
들어가기 앞서
보통 웹퍼블리싱을 하다 보면 가변적으로 변하는 페이지나 반응형 웹디자인(responsive webdesign) 시 %(percentage)로 등분할된 width값을 주기가 까다로운 것들이 존재합니다.
정확하게 나누어 떨어질 경우(예: 100% / 4 = 25%)는 크게 문제가 되지 않으나 그렇지 않을 경우(예:100% / 3 = 33.3333..%) 에는 float 속성시 퍼블리셔들의 애를 먹이곤 합니다. 이를 해결하기 위해 몇겹으로 div를 이용하여 둘러싸거나 정확히 픽셀값을 지정하여 계산한다던가, float 대신 absolute positioning으로 문제를 해결합니다.
사실 LESS나 SASS 같은 경우 이와 같은 것을 처리할때 CSS내의 함수를 이용하여 쉽게 처리할 수 있습니다. 그러나 이러한 함수를 CSS3 Spec 에서도 지원해 줄수 있는 방법이 여럿 있습니다.
아래 calc 함수 뿐만 아니라 column-count, display:table 등과 같은 방법으로 처리할 수 있으나 현재 글을 쓰고 있는 이 시점에서는 column-count보다 calc() 함수를 대부분이 많이 지원합니다.
그럼 CSS3의 보석과 같은(?) calc() 함수에 대해서 알아보도록 합시다.
calc()함수 사용하기
위에서 언급했던것 처럼 calc() 함수는 width, height, font-size, margin, padding 값의 길이를 계산할때나 각도, 수치, 변형(transition), 사운드 재생 횟수, 애니메이션 처리시 사용하는 함수 입니다. 이를 표현하기 위해서는 더하기, 빼기, 곱하기, 나누기등 사칙연산자를 이용하여 표현할 수 있습니다.
Markup
<div class="wrapper">
<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>
</div>
위와 같이 wrapper 클래스로 둘러싸인 3개의 div.col 태그들을 정확히 3등분 하기 위해 다음과 같이 calc()함수를 이용하여 쉽게 처리할 수 있습니다.
CSS
.wrapper .col {
width: calc(100% / 3);
padding: 0 10px;
}
조금 더 호환되게 작성하기 위해서는 vendor-prefix를 이용하여 다음과 같이 표현합니다.
.wrapper .col {
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
float: left;
height: 100%;
text-align: center;
font-size: 50px;
color: #fff;
line-height: 300%;
font-weight: bold;
}
오페라 prefix를 사용하지 않은 이유는 글쓰는 현재 오페라 브라우저는 지원하지 않기 때문입니다.
현재는 IE9 이상, webkit 계열, 모질라계열이 calc()함수를 지원합니다.
전체소스
<!doctype html>
<html>
<head>
<title>CSS3 calc() function</title>
<style type="text/css">
.wrapper {
width: 700px;
margin: 50px auto 0;
height: 500px;
}
.col {
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
float: left;
height: 100%;
text-align: center;
font-size: 50px;
color: #fff;
line-height: 300%;
font-weight: bold;
}
.col.one {
background-color: #3b3140;
}
.col.two {
background-color: #bfb8a3;
}
.col.three {
background-color: #f2e0c9;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>
</div>
</body>
</html>
전체 너비에서 중간에 60px 만 띄우고 싶을 경우
#element1, #element2 {
float: left;
width: calc(50% - 30px);
}
#element2 {
margin-left: 60px;
}
각 요소 사이에 글꼴의 4배(4em) 만큼 간격을 두고 싶을때
#element1, #element2 {
width: calc(50% - 2em);
}
두 요소를 2px의 테두리로 둘러싸고 싶을때
#element1, #element2 {
width: calc(50% - 2em - 4px);
border: 2px solid #000;
}
복잡한 연산공식을 사용하고 싶을때
#element1, #element2 {
width: calc((50% + 2em)/2 + 14px);
}
calc()함수와 같은 CSS3의 min(), max()함수 사용법
#myelement {
width: max(300px, 30%, 30em);
font-size: min(10px, 0.6em);
}
몇가지 짚어봐야 할것들
calc()함수 사용시 유용한 몇가지 팁에 대해 알아보면..
- 무엇보다 모든 계산은 왼쪽에서 오른쪽으로 진행되며
- 사칙연산과 마찬가지로 곱하기, 나누기가 제일 먼저 연산되며
- calc()함수는 현재 오페라 브라우저와 IE9 미만의 브라우저에서는 지원되지 않으며
- 호환성을 위해 -moz, -webkit 과 같은 vendor-prefix를 먼저 작성해야 하며
- 예를 들어 calc(50% - 10px) 과 같이 연산시 다른 단위값들을 사용할 수 있으며
- calc(100% - 20px)과 같이 더하기(+), 빼기(-) 연산자의 경우 앞뒤 공백이 반드시 들어가야 하나 곱하기(x), 나누기(/)는 공백이 필요하지 않습니다.
현재 지원 브라우저
결론
CSS3 이전에는 항상 고정된 값을 이용하여 계산을 해 왔으나 calc()함수를 이용하여 좀더 스마트한 방법으로 처리할 수 있수 있어서 개발시 상당히 편리하게 사용될 것입니다. 다만, 지원하지 않는 브라우저에 대해서는 좀더 다양한 방법으로 호환되게 작성해야 한다는 점..... ( 귀찮니즘 !!! )
참조:
- http://www.hongkiat.com/blog/css3-calc-function/
- http://www.sitepoint.com/css3-calc-function/
- W3C: http://www.w3.org/TR/css3-values/#calc
- calc() 브라우저 지원현황 : http://caniuse.com/calc
- CSS3 브라우저 지원현황 : http://www.quirksmode.org/css/contents.html
- CSS 속성값들 색인 : http://meiert.com/en/indices/css-properties/
'Publisher > CSS' 카테고리의 다른 글
| CSS3의 구조적인 가상선택자 (1) | 2013.03.21 |
|---|---|
| Height 100% 2~3단 컨텐츠 레이아웃잡기 (18) | 2010.07.27 |
| 간단한 CSS Reset (4) | 2010.05.24 |
| CSS 최적화 기법 (7) | 2010.03.08 |
| 지금 바로 쓸수 있는 CSS3 (0) | 2010.03.07 |