부트스트랩 - CSS 변수: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩의 CSS 변수 세계로 뛰어들어 볼 거예요. 초보자라고 걱정하지 마세요; 마치 따뜻한 교실에서 함께 앉아 있는 것처럼 단계별로 안내해 드릴게요. 이 흥미로운 여정을 시작해 보세요!

Bootstrap - CSS Variables

CSS 변수는 무엇인가요?

부트스트랩 특정 변수에 뛰어들기 전에, CSS 변수가 무엇인지 이해해 보겠습니다. CSS 변수, 또는 CSS 커스텀 프로퍼티는 스타일시트 전체에서 재사용할 수 있는 특정 값을 저장하는 데 사용됩니다. 이를 통해 당신의 좋아하는 색상, 크기, 기타 CSS 값을 저장하는 작은 컨테이너로 생각할 수 있습니다.

루트 변수

부트스트랩에서 루트 변수는 전체 변수 시스템의 기반입니다. 이들은 :root 선택자에서 정의되며, 문서 트리의 가장 높은 수준을 나타냅니다.

:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}

이 변수들은 부트스트랩 전체에서 사용되는 핵심 색상을 정의합니다. 예를 들어, --bs-blue는 부트스트랩의 주요 블루 색상입니다. 이를 자신의 CSS에서 다음과 같이 사용할 수 있습니다:

.my-element {
color: var(--bs-blue);
}

기본 변수

부트스트랩은 다양한 컴포넌트를 스타일링하는 데 사용되는 기본 변수를 제공합니다. 이 변수들은 자주 루트 변수를 참조합니다.

:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}

이처럼 --bs-primary은 --bs-blue의 값을 사용하여 프로젝트 전체에서 일관된 스타일링을 쉽게 할 수 있습니다.

다크 모드 변수

부트스트랩 5는 CSS 변수를 사용하여 내장된 다크 모드 지원을 추가했습니다. 이 변수들은 다크 모드가 활성화될 때 값이 변경됩니다.

[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}

data-bs-theme="dark" 어트리뷰트가 요소에 적용되면 (보통 <html> 또는 <body> 요소), 이 변수들이 라이트 모드 대체 변수를 덮어쓰며 즉시 사이트를 다크 모드로 변환합니다. 멋지죠?

컴포넌트 변수

부트스트랩 컴포넌트도 스타일링을 위한 CSS 변수를 사용합니다. 이는 개별 컴포넌트를 조정하는 데 유용합니다.

.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}

이 변수들은 주요 버튼의 모든 외관을 제어합니다. 하버颜色을 변경하고 싶다면 --bs-btn-hover-bg를 수정하면 됩니다!

접두사

부트스트랩은 모든 변수에 bs- 접두사를 사용하여 다른 커스텀 변수나 다른 라이브러리의 변수와 충돌을 피킵니다. 자신의 변수를 정의할 때는 자신만의 접두사를 사용하는 것이 좋습니다.

:root {
--my-awesome-color: #ff69b4;
}

예제

지식을 실천해 보겠습니다. 몇 가지 예제를 통해 살펴보겠습니다:

주요 색상 변경:

:root {
--bs-primary: #ff69b4; /* 핫 핑크는 새로운 블루! */
}

커스텀 버튼 생성:

.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* 하버에서 더 진한 핑크 */
--bs-btn-hover-border-color: #ff1493;
}

다크 모드에서 본문 배경 조정:

[data-bs-theme="dark"] {
--bs-body-bg: #000; /* 깊은 검정 배경 */
}

포커스 변수

부트스트랩은 포커스 상태를 위한 변수를 제공하여 사이트 전체에서 접근성을 보장합니다:

:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

이 변수들은 상호작용 요소 주변의 포커스 링의 외관을 제어합니다.

그리드 브레이크포인트

마지막으로, 부트스트랩의 반응형 그리드 시스템은 CSS 변수로 제어됩니다:

:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}

이 변수들은 레이아웃이 다양한 화면 크기에 맞게 변경되는 지점을 정의합니다.

요약

다음은 우리가 다룰 주요 CSS 변수 유형의 빠른 참조 표입니다:

변수 유형	목적	예제
루트 변수	핵심 값 정의	`--bs-blue: #0d6efd;`
기본 변수	테마 색상 설정	`--bs-primary: var(--bs-blue);`
다크 모드 변수	다크 테마 제어	`--bs-body-bg: #212529;`
컴포넌트 변수	특정 컴포넌트 스타일링	`--bs-btn-bg: var(--bs-primary);`
포커스 변수	포커스 상태 제어	`--bs-focus-ring-width: 0.25rem;`
그리드 브레이크포인트	반응형 레이아웃 제어	`--bs-breakpoint-md: 768px;`

이제 부트스트랩 CSS 변수의 세계로 첫 걸음을 냈어요. 이를 마스터하는 열쇠는 연습입니다. 프로젝트에서 이 변수들을 조정해 보고 디자인이 어떻게 변하는지 확인해 보세요. 행복한 코딩 되세요, 그리고 즐겁게 만들어 보세요!

Credits: Image by storyset