[CSS] CSS에서 크기 연산하기

CSS3 버젼이 발표되면서, (아마 2010년 쯤 일것이다.) 드디어 CSS도 연산능력이 생겼다!

Calc라는 함수인데, 100%/3 이런식의 연산이 가능하다. Javascript를 사용하여 연산하던 수고를 덜어줄 수 있겠다. 다만, 아직도 Calc 함수가 작동하지 않는 브라우져들이 조금 있다..

Calc 함수를 사용할 수 있는 브라우져를 보려면, 이 사이트를 참조하면 되겠다.

(안드로이드는 4.4버젼부터 지원한다니 으아아아)

바로 함수 사용법으로 넘어가자면,

width:calc(100%/3 – 10px);

이런식으로 사용이 가능하다! 보면 알겠지만, 가로의 길이를 100%에서 3을 나누고 -10px을 시켜준다.

여기서 주의점은 +나 -를 사용할 때는 앞뒤 공백이 반드시 존재해야 한다.

width:calc(100%-10px);

이렇게 작성하면, 동작하지 않는다.

You may also like...