css calc() 함수

최근에 calc() 이라는 css 함수의 존재를 알게되었다.

calc()은 이름에서도 알 수 있듯이 계산을 해주는 css함수로 자바스크립트로 css계산을 하던 것을 상당부분 대체할 수 있다

+ - * / 의 사칙연산을 사용 하여 width, font-size, margin 등 px, %, em, rem, deg 등의 단위를 쓰는 영역에 모두 사용이 가능하다

유의사항은 + - 사용시에 반드시 연산자 양 옆에 공백을 주어야 한다.

-사용시 공백이 없을 경우 음수값으로 처리되기 때문에 + -의 경우는 공백이 반드시 필요하다. 

 * / 의 경우는 공백이 필수 사항은 아니지만 표현의 일관성을 위해 공백을 사용해주자

잘못된 사용

width: calc(100%-80px);

+ - 연산자를 붙여쓰면 이미지처럼 invalid property value오류가 난다

바른 사용

width: calc(100% - 80px);

## less에서 사용시

회사에서 less를 사용하는데 css에서 처럼 사용하면 컴파일이 되지 않는다. 

width: ~"calc(100% + 10px)";

위와 같은 형태로 사용을 해야 제대로 컴파일이 된다.

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다