calc (사칙연산)
Atomic CSS에서 calc()를 사용할 수 있습니다. 모든 단위 속성(width, height, margin, padding, top, left 등)에서 지원됩니다.
기본 문법
기본 형식은 속성접두사 + calc + 값A단위 + - + 값B단위이며, 기본 연산은 빼기(-)입니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
wcalc100p-200px | width: calc(100% - 200px) | 전체 너비에서 사이드바 제외 |
wcalc100p-25rem | width: calc(100% - 250px) | 고정 영역 제외한 유동 너비 |
hcalc100vh-6rem | height: calc(100vh - 60px) | 화면 높이에서 헤더 제외 |
hcalc100vh-12rem | height: calc(100vh - 120px) | 헤더+푸터 제외 높이 |
maxwcalc100p-4rem | max-width: calc(100% - 40px) | 양쪽 여백 20px씩 확보 |
minwcalc50p-2rem | min-width: calc(50% - 20px) | 최소 너비 (반 - 간격) |
minhcalc100vh-8rem | min-height: calc(100vh - 80px) | 최소 높이 확보 |
tcalc50p-2rem | top: calc(50% - 20px) | 세로 중앙 근처 위치 |
lcalc100p-3rem | left: calc(100% - 30px) | 오른쪽 끝에서 30px 앞 |
mtcalc50p-5rem | margin-top: calc(50% - 50px) | 수직 중앙 마진 |
pcalc2rem-4px | padding: calc(2rem - 4px) | 패딩 미세 조정 |
gapcalc2rem-4px | gap: calc(2rem - 4px) | 간격 미세 조정 |
fscalc1-6rem-2px | font-size: calc(1.6rem - 2px) | 폰트 크기 미세 조정 |
brcalc2rem-4px | border-radius: calc(2rem - 4px) | 라운드 미세 조정 |
사칙연산 키워드
빼기 외에 더하기, 곱하기, 나누기도 사용할 수 있습니다. calc-add, calc-sub, calc-mul, calc-div를 사용합니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">키워드 | 연산 | 예시 | CSS |
|---|---|---|---|
calc | 빼기 (-) | wcalc100p-200px | width: calc(100% - 200px) |
calc-sub | 빼기 (-) | wcalc-sub100p-200px | width: calc(100% - 200px) |
calc-add | 더하기 (+) | wcalc-add50p-100px | width: calc(50% + 100px) |
calc-mul | 곱하기 (*) | wcalc-mul2rem-3 | width: calc(2rem * 3) |
calc-div | 나누기 (/) | wcalc-div100p-3 | width: calc(100% / 3) |
사용 가능한 속성
단위를 받는 모든 속성에서 calc을 사용할 수 있습니다.
Layout & Position
whminwmaxwminhmaxhtrblSpacing
mmtmrmbmlpptprpbplgaprgcgTypography
fslhlswstiBorder
brbwbtwbrwbbwblwbsGrid
gtcgtrGrid에서 calc
grid-template-columns/rows에서도 calc을 사용할 수 있습니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS |
|---|---|
gtccalc100p-200px-1fr | grid-template-columns: calc(100% - 200px) 1fr |
gtccalc100p-25rem-1fr | grid-template-columns: calc(100% - 250px) 1fr |
gtccalc-add50p-100px | grid-template-columns: calc(50% + 100px) |
gtccalc-div100p-3-1fr | grid-template-columns: calc(100% / 3) 1fr |
사용 예시
<!-- === Layout === -->
<!-- Sidebar + Content -->
<div class="df">
<aside class="w25rem">Sidebar</aside>
<main class="wcalc100p-25rem">Content area</main>
</div>
<!-- Header + Content + Footer (excluding Header 60px, Footer 60px) -->
<div class="df fdc h100vh">
<header class="h6rem">Header</header>
<main class="hcalc100vh-12rem oa">Content (scroll)</main>
<footer class="h6rem">Footer</footer>
</div>
<!-- ═══ Responsive Width ═══ -->
<!-- Container with margins on both sides -->
<div class="maxwcalc100p-4rem mxa">
Reserve 20px margin on each side
</div>
<!-- 2-column layout (accounting for gap) -->
<div class="df gap2rem">
<div class="wcalc50p-1rem">Left (50% - half of gap)</div>
<div class="wcalc50p-1rem">Right (50% - half of gap)</div>
</div>
<!-- === Positioning === -->
<!-- Centered tooltip (absolute) -->
<div class="pa t50p lcalc50p-8rem">
Center a 160px width tooltip horizontally
</div>
<!-- Fixed distance from right edge -->
<button class="pa tcalc100p-5rem r2rem">
Fixed 50px above bottom
</button>
<!-- === Arithmetic operations === -->
<!-- 1/3 width -->
<div class="wcalc-div100p-3">1/3 of full</div>
<!-- Add fixed value to 50% -->
<div class="wcalc-add50p-100px">50% + 100px</div>
<!-- Multiple of default -->
<div class="wcalc-mul4rem-3">4rem × 3 = 120px</div>
<!-- === calc in Grid === -->
<!-- Fixed sidebar + Fluid Content -->
<div class="dg gtccalc100p-25rem-1fr gap2rem">
<main>Content</main>
<aside>Sidebar 250px</aside>
</div>
<!-- === Fine adjustments === -->
<!-- Padding accounting for border -->
<div class="b2pxsolidDDDDDD pcalc2rem-2px">
Subtract border width from padding
</div>
<!-- Full width accounting for scrollbar -->
<div class="wcalc100vw-17px">
Full width excluding scrollbar (~17px)
</div>팁
% 단위는 p로 표기
100%는 100p로 씁니다. 예: wcalc100p-200px → width: calc(100% - 200px)
기본 연산은 빼기
calc만 쓰면 빼기입니다. 다른 연산은 calc-add, calc-mul, calc-div를 사용하세요.
소수점은 하이픈
1.5rem은 1-5rem으로 표기합니다. 예: wcalc100p-1-5rem