CSS calc() 플레이그라운드

참고

CSS calc()란?

calc() 함수는 CSS 속성 값을 수학 식으로 지정할 수 있습니다. 서로 다른 단위(px, %, rem, vw 등)를 혼합하여 연산할 수 있어 반응형 레이아웃에 매우 유용합니다. 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 지원합니다.

사용 가능한 단위

px — 픽셀. 고정값. % — 부모 요소에 대한 비율. rem — 루트 요소 글꼴 크기에 대한 배율. em — 부모 요소 글꼴 크기에 대한 배율. vw / vh — 뷰포트 너비/높이에 대한 비율. vmin / vmax — 뷰포트의 작은 쪽/큰 쪽에 대한 비율.

일반적인 사용 예

전체 너비에서 패딩 빼기 — width: calc(100% - 2rem). 유동적 타이포그래피 — font-size: calc(1rem + 1vw). 센터링 — margin-left: calc(50% - 150px). 그리드 레이아웃 — width: calc(33.333% - 20px).

개인정보보호

모든 생성 처리는 브라우저에서 100% 실행됩니다. 데이터는 서버에 전송되지 않습니다.