CSS calc() 함수의 실용적 사용 사례
Source
Evernote/Inbox/A Couple of Use Cases for Calc().md
Summary
이 문서는 CSS의 calc() 함수가 제공하는 네 가지 기본 산술 연산자(+, -, *, /)를 활용하여, CSS 전처리기로는 구현하기 어려운 ‘단위 혼합(예: %와 px)‘을 통한 레이아웃 문제를 해결하는 방법을 다룹니다. 주요 사용 사례로는 1) 헤더 높이를 제외한 콘텐츠 영역의 스크롤 가능 높이 설정, 2) 배경 이미지의 우측 하단 기준 위치 지정, 3) 부모 요소 없이 고정 너비의 gutter(여백)를 가진 컬럼 레이아웃 구현, 4) 복잡한 분수 퍼센트 계산의 가독성 향상(예: 100% / 7), 5) box-sizing: border-box 의 동작을 calc()로 모사하는 방법이 소개됩니다. 브라우저 지원은 데스크톱(IE9+, Safari6+)에서는 양호하나 모바일(Android, Opera Mini)에서는 제한적임을 명시합니다.
Key Points
- calc() 의 가장 큰 장점은 퍼센트(%)와 픽셀(px) 등 서로 다른 단위를 혼합하여 계산할 수 있다는 점이며, 이는 렌더링 시점에 처리되므로 전처리기로 대체 불가함.
- 문법상 산술 연산자 주변에는 공백이 필수이며, 중첩 사용이 가능함.
- 사용 사례 1: 부모 요소의 100% 높이에서 고정 높이 헤더를 빼서, 헤더는 고정되고 콘텐츠만 스크롤되는 레이아웃 구현.
- 사용 사례 2: background-position 에서 calc(100% - Xpx) 를 사용하여 요소의 오른쪽/아래쪽 끝에서 특정 거리만큼 떨어진 위치에 배경 이미지 배치.
- 사용 사례 3: float 기반 컬럼 레이아웃에서 첫 번째 컬럼의 margin 과 두 번째 컬럼의 width(calc) 를 조합하여 고정 너비의 gutter 구현.
- 사용 사례 4: 7 등분과 같은 복잡한 퍼센트 값을 직접 계산한 마법수(magic number) 대신 calc(100% / 7) 과 같이 표현하여 코드의 가독성 및 유지보수성 향상.
- 브라우저 지원: 데스크톱은 대부분 지원하지만, 모바일(Android, Opera Mini) 및 구형 iOS 는 미지원 또는 제한적 지원이므로 주의 필요.