CSS 중급 기초

CSS CSS 함수 (calc(), var(), 등)

CSS CSS 함수 (calc(), var(), 등) — 중급

CSS 함수 (calc(), var(), 등)

1. 도입 (왜 배워야 하는가)

CSS 함수는 현대 웹 디자인에서 매우 중요한 역할을 합니다. calc(), var(), clamp()와 같은 함수들은 레이아웃을 더욱 유동적으로 만들고, 변수 사용을 통해 스타일을 효율적으로 관리할 수 있게 도와줍니다. 이러한 기능을 활용하지 않으면, 고정된 값만으로 레이아웃을 구성하게 되어 다양한 화면 크기와 해상도에 적절히 대응하지 못하는 문제가 발생할 수 있습니다. 예를 들어, 반응형 웹 디자인을 구현할 때, CSS 함수를 통해 요소의 크기나 위치를 동적으로 조정할 수 있어야 합니다. 이를 모르면, 코드 유지보수가 어려워지고, 사용자 경험이 저하될 수 있습니다.

2. 핵심 개념 설명

calc(): CSS에서 수학적 계산을 수행할 수 있는 함수입니다. 예를 들어, 두 개의 값(픽셀, 퍼센트 등)을 더하거나 빼는 등의 연산을 가능하게 합니다.
var(): CSS 변수를 사용하기 위한 함수입니다. 변수를 정의하고, 이를 통해 스타일을 쉽게 관리하고 재사용할 수 있습니다.

용어	설명
calc()	CSS에서 수학적 계산을 수행하는 함수
var()	CSS 변수를 정의하고 사용하는 함수
clamp()	값의 범위를 제한하는 함수

3. 기본 코드 예제

calc() 사용 예제

.box {
  width: calc(100% - 20px); / 전체 너비의 100%에서 20px를 뺀 너비 /
  height: 200px; / 고정된 높이 /
  background-color: lightblue; / 배경색 /
}

실행 결과: .box 요소는 전체 너비의 100%에서 20px을 뺀 너비를 가집니다.
동작 설명:

- width: calc(100% - 20px); → 전체 너비의 100%에서 20px을 빼서 너비를 설정합니다. - height: 200px; → 높이는 200px로 고정합니다. - background-color: lightblue; → 배경색을 연한 파란색으로 설정합니다.

var() 사용 예제

:root {
  --primary-color: #3498db; / 기본 색상 정의 /
}

.button {
  background-color: var(--primary-color); / 변수를 사용하여 배경색 설정 /
  color: white; / 글자색을 흰색으로 설정 /
  padding: 10px 15px; / 패딩 설정 /
}

실행 결과: .button 요소의 배경색은 정의한 --primary-color가 됩니다.
동작 설명:

- :root { --primary-color: #3498db; } → CSS 변수 --primary-color를 정의합니다. - background-color: var(--primary-color); → 정의된 변수를 사용하여 배경색을 설정합니다. - color: white; → 글자색을 흰색으로 설정합니다. - padding: 10px 15px; → 버튼에 패딩을 적용하여 공간을 만듭니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 장바구니 구현할 때

.cart {
  width: calc(50% - 30px); / 반응형으로 두 개의 장바구니 아이템을 나란히 배치 /
  margin: 15px; / 아이템 간격 설정 /
  background-color: var(--primary-color); / 이전에 정의한 변수를 사용 /
}

이 코드는 장바구니 아이템을 두 개의 열로 나누어 반응형 웹을 구현하는 데 유용합니다.

예제 2: 다양한 화면 크기에 대응하는 레이아웃

.container {
  padding: 20px;
  width: calc(100% - 40px); / 화면 크기에 따라 유동적인 레이아웃 제공 /
}

이 코드는 다양한 화면 크기에서 여백을 뺀 너비를 설정하여 유동적인 레이아웃을 만들어 줍니다.

5. 흔한 실수와 주의사항

실수 1: calc()에서 단위 혼용

// 잘못된 코드
width: calc(100% - 20); / 단위가 없음 /

올바른 코드:

width: calc(100% - 20px); / 단위가 필요함 /

실수 2: var() 사용 시 브라우저 호환성

// 잘못된 코드
background-color: var(--undefined-variable); / 정의되지 않은 변수를 사용함 /

올바른 코드:

background-color: var(--primary-color, #000); / 기본값을 제공 /

6. 정리

CSS 함수는 레이아웃과 스타일을 유동적으로 관리하는 데 필수적입니다.
calc()는 수학적 계산을 통해 크기를 동적으로 조정 가능하게 합니다.
var()는 변수를 사용하여 스타일을 효율적으로 관리할 수 있습니다.
실수하지 않도록 단위와 변수를 신중히 사용해야 합니다.

다음에 학습하면 좋은 주제

CSS Grid와 Flexbox를 통한 레이아웃 디자인
CSS 애니메이션 및 전환 효과
미디어 쿼리를 통한 반응형 웹 디자인

학습