CSS Functions

CSS 함수는 스타일 값(크기, 색상, 위치 등)을 동적으로 계산하거나 변환하는 역할을 합니다.

CSS 함수를 사용하면 정적인 디자인을 넘어 수학적 계산이나 조건부 스타일링이 가능해집니다.

---

1. 수학적 계산 함수

요소의 크기나 간격을 계산할 때 사용합니다.

• calc(): 서로 다른 단위(예: %와 px)를 섞어서 계산할 수 있게 해줍니다.
• min() / max(): 여러 값 중 가장 작거나 큰 값을 선택합니다.
• clamp(): 최소값, 유동값, 최대값을 설정하여 반응형 크기를 한 줄로 정의합니다.

CSS

 

.container {
  /* 전체 너비에서 100px을 뺀 나머지 */
  width: calc(100% - 100px); 
  
  /* 폰트 크기를 최소 16px, 최대 32px 사이에서 유동적으로 조절 */
  font-size: clamp(16px, 5vw, 32px); 
}

---

2. 변형 함수 (Transform)

요소를 회전, 이동, 왜곡, 확대/축소할 때 사용합니다.

• translate(): 요소를 가로(x) 또는 세로(y)로 이동시킵니다.
• rotate(): 요소를 지정한 각도만큼 회전시킵니다.
• scale(): 요소를 확대하거나 축소합니다.
• skew(): 요소를 기울여 왜곡시킵니다.

CSS

 

.box:hover {
  /* 오른쪽으로 20px 이동하고 45도 회전하며 1.2배 확대 */
  transform: translate(20px, 0) rotate(45deg) scale(1.2);
}

---

3. 색상 및 그래디언트 함수

색상을 정의하거나 부드러운 색 변화를 만듭니다.

• rgb() / rgba(): 적, 녹, 청색과 투명도(a)로 색을 만듭니다.
• hsl() / hsla(): 색상, 채도, 명도로 색을 조절하여 직관적인 색 변형이 가능합니다.
• linear-gradient(): 선형 그래디언트 배경을 만듭니다.
• radial-gradient(): 원형 그래디언트 배경을 만듭니다.

CSS

 

.hero {
  /* 오른쪽 아래 방향으로 파란색에서 보라색으로 변하는 배경 */
  background: linear-gradient(to bottom right, blue, purple);
  color: rgba(255, 255, 255, 0.8); /* 80% 투명한 흰색 */
}

---

4. 기타 유용한 함수들

• var(): 사용자가 정의한 CSS 변수(Custom Properties) 값을 가져옵니다.
• url(): 이미지나 폰트 등 외부 리소스 파일의 경로를 지정합니다.
• attr(): HTML 요소의 속성값을 가져와 스타일(주로 content)에 사용합니다.

CSS

 

:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color);
  background-image: url('pattern.png');
}

---

📋 주요 CSS 함수 요약표

카테고리	대표 함수	용도
수학	calc(), clamp()	유연한 수치 계산 (반응형 필수)
변형	translate(), rotate()	요소의 위치 및 형태 변경
색상	rgba(), linear-gradient()	색상 정의 및 효과
참조	var(), url(), attr()	외부 값이나 변수 활용

---

학습 정리

• calc() 내에서 연산자(+, -) 앞뒤에는 반드시 공백이 있어야 브라우저가 올바르게 인식합니다.
• **clamp()**는 미디어 쿼리(@media)를 줄여주는 혁신적인 함수로 현대 웹 디자인에서 매우 선호됩니다.
• CSS 함수는 속성의 '값' 자리에 위치하여 동적인 브라우저 환경에 대응하게 해줍니다.

---

디자인에 지능을 더하는 CSS 함수들을 정복하셨습니다!

---