CSS3 - calc() 사용 웹퍼블리싱

css3 - calc()

반응형이나 모바일 코딩을 하다 보면 %로 값을 주기가 애매한 것들이 있습니다.
이러한 것들을 float이나 position absolute 또는 fixed를 사용하거나 정확한 px 값을 지정하여 미디어 쿼리를 사용하여 해상도별로 나누어 해결하곤 하는데, calc() 함수를 사용하여 값을 쉽게 지정해 줄 수 있습니다.

calc()함수 사용

검사버튼 삭제버튼 calc() 함수는 width, height, margin, padding 값을 사칙연산자를 이용하여 표현할 수 있습니다.
각각 사용방법을 알아보겠습니다.

※ width

float값으로 width값의 %를 나누기 애매할 경우에 사용하기에 유용합니다.

Markup

	
1
	
2
	
3
	
4
	
5
	
6
	
7

위와 같이 lst_width class로 쌓여있는 li태그들을 7등분 하기 위해 calc()함수를 이용하여 간단하게 처리 할 수 있습니다.

css

.lst_width>li{
	float:left;width:calc(100% / 7);
	height:50px;
	color:#fff;
	text-align:center;
}
.lst_width>li:nth-child(odd){
	background:#333;
}
.lst_width>li:nth-child(even){
	background:#999;
}

width값 예시 보기

※ height

반응형이나 모바일에서 높이 값을 쉽게 잡을 수 있습니다.
위에서 언급했지만 position absolute 또는 fixed를 사용하거나 정확한 px 값을 지정하지 않아도 처리가 가능합니다.

height-calc.zip

다운로드

위 첨부파일은 모바일 햄버거 메뉴로 예제를 만들어 봤습니다.

후기

반응형 웹과 모바일 코딩을 하면서 width와 height의 값을 %로 사용하면서 길이가 깔끔하게 떨어지지 않을 때에 소수점으로 li:first-child{width:33.34%} li{width:33.33%} 이런 식으로 써줘도 상관없지만 calc() 함수를 이용하여 코딩을 한다면 한층 더 간결하고 깔끔한 코드가 되겠네요.