반응형
calc() 함수는 다양한 속성들의 속성값 계산을 가능하게 만들어 준다. 아래 예시를 보자.
See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen.
계산 법칙과 우선순위는 사칙연산과 동일하다.
- 괄호 안을 계산
- 곱셈과 나눗셈을 계산
- 덧셈과 뺄셈을 계산
- 동순위 연산이 2개 이상이면, 왼쪽부터 오른쪽 순으로 계산
계산의 대상으로 px, % 등을 함께 계산하는 것이 가능하다.
See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen.
calc() 함수를 통해 요소의 너비나 높이 뿐만 아니라 다양한 속성들의 속성값을 계산하는 것이 가능하며, 코드의 확장성을 위해 :root를 통한 변수를 통제하여 일정 값들을 계산하는 것 또한 가능하다.
◆ 함께 보면 좋은 글
반응형
'웹 프로그래밍 > 프론트엔드' 카테고리의 다른 글
| [HTML/CSS] :root를 통해 CSS에서 변수를 사용해 보자 : 가상 클래스의 활용 (0) | 2023.06.25 |
|---|---|
| [HTML/CSS] cubic-bezier()를 통해 속성 변화를 조절해 보자 : 변화에 변화를 주자 (0) | 2023.06.23 |
| [HTML/CSS/JS] GSAP로 애니메이션을 만들어 보자 : 문장 애니메이션 효과 만들기 (0) | 2023.06.14 |
| [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 다양한 애니메이션 기능을 구현해 보자 feat. to, from과 fromTo (0) | 2023.06.13 |
| [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline (0) | 2023.06.11 |
댓글