[css] 가변 값을 위한 함수 calc()

calc는 반응형 웹 구축 시 유용한 css 함수입니다.

 

만약 전체 width에서 230px를 제외한 길이만큼 영역을 지정하고 싶다. 고정된 영역에서 230px를 더하고 빼는 것은 어렵지 않지만, 반응형 웹에서는 상대적인 영역을 사용하기 때문에 calc 함수를 사용합니다.

 

.width-m230 {
	width: calc(100% - 230px);
}

 

 

매우 간단한 방법으로 원하는 width를 사용할 수 있게 되었습니다.

width 값 말고도 padding, margin, font-size 등에도 유용하게 쓸 수 있습니다.

 

유의할 점은 값과 연산자 사이에 띄어쓰기를 꼭 해야 한다는 점입니다.

calc(값1 연산자 값2)