CSS 함수
🛠️ 더 똑똑하게 스타일링하는 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> 태그)를 의미합니다.
여기에 변수를 선언하면 문서 전체 어디서든 공통으로 변수를 가져다 쓸 수 있습니다. (전역 변수 역할)