동적 계산을 위한 calc()
calc() 함수를 사용해 CSS에서 단위를 혼합하고 산술 연산을 수행하여 동적 값을 만듭니다.
동적 계산을 위한 calc()은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
calc()란 무엇인가요?
calc()를 사용하면 CSS 속성 값에서 직접 산술 연산을 수행할 수 있습니다. 하나의 계산에서 서로 다른 단위(px, %, rem, vw)를 함께 사용할 수도 있습니다.
calc() 기본 문법
더하기(+), 빼기(-), 곱하기(*) 및 나누기(/)를 지원합니다. + 및 - 연산자 양쪽에는 공백이 필요합니다.
<div class="sidebar">Sidebar (100% - 240px)</div>단위 혼합
calc()의 강력한 점은 원래는 함께 사용할 수 없는 서로 다른 단위를 결합할 수 있다는 것입니다:
<div class="hero">Hero</div>
<div class="column">Column</div>calc()와 CSS 변수
동적인 설계 토큰을 만들려면 calc()와 CSS 사용자 지정 속성을 결합하세요:
<div class="main">Main content</div>중첩 calc()
calc()는 중첩할 수 있지만, 각 컨텍스트에서 이미 수학 연산을 평가하므로 거의 필요하지 않습니다:
<div class="element">Element</div>calc()를 사용한 유동적 타이포그래피
calc()를 사용하여 두 크기 사이를 선형으로 보간하세요:
<h1>Fluid Heading</h1>calc()의 나눗셈
나눗셈에서는 제수가 단위 없는 숫자여야 합니다:
<div class="thirds">Third width</div>calc()와 그리드 및 플렉스박스
트랙 정의와 flex-basis 내부에서 유용하게 사용할 수 있습니다:
<div class="grid"><div>A</div><div>B</div></div>calc()와 다른 함수 비교
언제 무엇을 사용할까요:
calc(): 임의의 산술 연산, 특히 단위 혼합min()/max(): 여러 옵션 중 더 작은 값 또는 더 큰 값 선택clamp(): 유동적인 값을 최솟값과 최댓값 사이로 제한
브라우저 지원
calc()는 모든 최신 브라우저와 IE11에서 지원됩니다. 가장 폭넓게 지원되는 CSS 함수 중 하나입니다. 최신 프로젝트에서는 대체 수단 없이 안전하게 사용할 수 있습니다.
일반적인 calc() 패턴
반복해서 사용하게 될 실용적인 패턴입니다:
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>빠른 확인
"부모 요소의 30%에서 20px을 뺀 값"을 올바르게 계산하는 calc() 표현식은 무엇인가요?
복습
calc()를 사용하면 단위가 서로 달라도 CSS에서 산술 연산을 수행할 수 있습니다. "전체 뷰포트에서 고정된 헤더를 뺀 값"과 같은 동적인 레이아웃과 유동적인 타이포그래피 보간을 구현할 수 있습니다. + 및 - 연산자 양쪽에는 공백이 필요합니다. CSS 변수와 결합하면 강력한 설계 토큰 계산을 할 수 있습니다. 완전한 유동적 크기 제어를 위해 min/max/clamp와 함께 사용하세요.
자주 묻는 질문
“동적 계산을 위한 calc()” 강의는 무료인가요?
네 — “동적 계산을 위한 calc()” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“동적 계산을 위한 calc()”에서 뭘 배우나요?
calc() 함수를 사용해 CSS에서 단위를 혼합하고 산술 연산을 수행하여 동적 값을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“동적 계산을 위한 calc()” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.