minstudio

유용한 CSS 함수와 커스텀 변수 (calc, var)

🛠️ 더 똑똑하게 스타일링하는 CSS 함수

CSS는 단순한 속성 지정뿐만 아니라, 값을 동적으로 계산하거나 변수를 불러오는 등 프로그래밍적인 기능도 내장하고 있습니다.

함수명 기능 설명 사용 예시
calc() 더하기, 빼기 등 수식을 계산하여 값을 동적으로 결정합니다. width: calc(100% - 50px);
var() 사전에 정의된 CSS 커스텀 속성(변수)의 값을 불러옵니다. 테마(다크/라이트)를 구현할 때 필수적입니다. color: var(--primary);
linear-gradient() 두 개 이상의 색상을 부드럽게 이어주는 선형 그라데이션 배경을 생성합니다. background: linear-gradient(red, blue);
url() 외부 이미지나 폰트 파일 등의 경로(주소)를 지정하여 불러올 때 사용합니다. background-image: url('bg.png');

이러한 함수들을 잘 활용하면 반응형 디자인 같은 복잡한 요구사항도 손쉽게 해결할 수 있습니다!

심화 학습

CSS 변수 (Custom Properties)

🎨 색상을 변수에 담아 똑똑하게 관리하기

웹사이트에 메인 컬러를 수십 군데 적용했는데, 컬러를 바꿔야 한다면 어떨까요? 하나하나 찾아서 바꾸는 것은 지옥일 것입니다.

CSS 변수를 사용하면 --변수이름: 값; 형태로 색상이나 폰트 크기 등을 저장해두고, var(--변수이름)으로 재사용할 수 있습니다.

💡 :root 란 무엇인가요?

:root는 문서의 뿌리, 즉 가장 최상위 요소(HTML 문서에서는 <html> 태그)를 의미합니다.
여기에 변수를 선언하면 문서 전체 어디서든 공통으로 변수를 가져다 쓸 수 있습니다. (전역 변수 역할) 

<div class="function-demo">
  var, calc, linear-gradient 함수가 모두 적용된 박스입니다!
</div>
<!-- ====== CSS 변수 (Custom Properties) ====== -->
<div style="margin: 30px 0; border-top: 1px solid #475569;"></div>
<style>
/* 최상위 요소(:root)에 전역 변수 선언 */
:root {
  --primary-color: #8b5cf6; /* 메인 브랜드 컬러 (보라색 지정) */
  --surface-color: #f8fafc; /* 밝은 표면 컬러 */
  --text-dark: #0f172a;
  --spacing: 1.5rem;
}

.theme-card {
  /* 변수를 가져다 사용! */
  background-color: var(--surface-color);
  border: 2px solid var(--primary-color);
  padding: var(--spacing);
  border-radius: 12px;
  text-align: center;
}

.theme-card h3 {
  color: var(--primary-color);
  margin: 0;
}
</style>

<div class="theme-card">
  <h3>CSS Variables</h3>
  <p style="color: var(--text-dark);">이 카드의 색상과 여백은 모두 변수로 제어됩니다. :root의 변수값을 바꿔보세요!</p>
</div>
실행 결과
유용한 CSS 함수와 커스텀 변수 (calc, var) | Minstudio