calc (사칙연산)
Atomic CSS에서 calc()를 사용할 수 있습니다. 모든 단위 속성(width, height, margin, padding, top, left 등)에서 지원됩니다.
기본 문법
기본 형식은 속성접두사 + calc + 값A단위 + - + 값B단위이며, 기본 연산은 빼기(-)입니다.
| 클래스 | 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를 사용합니다.
| 키워드 | 연산 | 예시 | 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을 사용할 수 있습니다.
| 클래스 | 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 |
사용 예시
<!-- ═══ 레이아웃 ═══ -->
<!-- 사이드바 + 콘텐츠 -->
<div class="df">
<aside class="w25rem">사이드바</aside>
<main class="wcalc100p-25rem">콘텐츠 영역</main>
</div>
<!-- 헤더 + 콘텐츠 + 푸터 (헤더 60px, 푸터 60px 제외) -->
<div class="df fdc h100vh">
<header class="h6rem">헤더</header>
<main class="hcalc100vh-12rem oa">콘텐츠 (스크롤)</main>
<footer class="h6rem">푸터</footer>
</div>
<!-- ═══ 반응형 너비 ═══ -->
<!-- 양쪽 여백이 있는 컨테이너 -->
<div class="maxwcalc100p-4rem mxa">
좌우 20px씩 여백 확보
</div>
<!-- 2단 레이아웃 (간격 고려) -->
<div class="df gap2rem">
<div class="wcalc50p-1rem">왼쪽 (50% - gap의 절반)</div>
<div class="wcalc50p-1rem">오른쪽 (50% - gap의 절반)</div>
</div>
<!-- ═══ 위치 지정 ═══ -->
<!-- 정중앙 툴팁 (absolute) -->
<div class="pa t50p lcalc50p-8rem">
너비 160px 툴팁을 수평 중앙에 배치
</div>
<!-- 오른쪽 끝에서 일정 거리 -->
<button class="pa tcalc100p-5rem r2rem">
하단에서 50px 위에 고정
</button>
<!-- ═══ 사칙연산 활용 ═══ -->
<!-- 3등분 너비 -->
<div class="wcalc-div100p-3">전체의 1/3</div>
<!-- 50%에 고정값 추가 -->
<div class="wcalc-add50p-100px">50% + 100px</div>
<!-- 기본값의 배수 -->
<div class="wcalc-mul4rem-3">4rem × 3 = 120px</div>
<!-- ═══ Grid에서 calc ═══ -->
<!-- 고정 사이드바 + 유동 콘텐츠 -->
<div class="dg gtccalc100p-25rem-1fr gap2rem">
<main>콘텐츠</main>
<aside>사이드바 250px</aside>
</div>
<!-- ═══ 미세 조정 ═══ -->
<!-- 보더를 고려한 패딩 -->
<div class="b2pxsolidDDDDDD pcalc2rem-2px">
border 두께만큼 패딩에서 빼기
</div>
<!-- 스크롤바 너비를 고려한 전체 너비 -->
<div class="wcalc100vw-17px">
스크롤바(약 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