가변적으로 변하는 페이지나 반응형 사이트를 만들 때, width/ height 값을 주기 까다로운 경우에 사용하면 좋은 calc() 함수
calc() 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다 !
전체 너비를 3등분 하고 싶은 경우
전체 너비에서 중간 60px만 띄우고 싶은 경우
위 경우 말고도 사칙연산을 이용하여 width, height, font-size, margin, padding 등등으 값을 조정하거나 각도, 수치, 변형등에도 사용할 수 있다
calc() 함수의 특징
🍞 사칙연산과 마찬가지로 곱하기, 나누기가 먼저 연산된다.
🍞 +와 - 연산자는 좌우에 공백이 있어야 한다. calc (50% -8px)은 백분율 값과 음수로 해석하여 유효하지 않음
🍞 *와 / 연산자는 공백을 요구하지 않지만, 추가하는 편이 일관성을 유지하기에 좋다.
🍞 함수를 중첩하여 사용할 수 있다. 이 때 내부의 calc() 함수는 단순한 괄호로 간주한다.
'TIL > CSS' 카테고리의 다른 글
[TIL] CSS - img src 가 아직 없을 때 화면 비워 놓기 (0) | 2023.03.16 |
---|---|
[TIL] CSS ㅡ class / id에 스타일 적용하기 (0) | 2022.09.06 |