커스터마이즈
커스터마이즈 (Customize)
Sass, 한가득의 전역 옵션, 광범위한 색상 시스템 등으로 Bootstrap을 테마링, 커스터마이즈, 확장하는 방법을 배워 보아요.
출처: 문서
본문
- Sass — 소스 Sass 파일을 활용해 변수, 맵, 믹스인, 함수를 이용해 보아요.
- Options — 내장된 변수로 Bootstrap을 커스터마이즈해서 전역 CSS 환경설정을 쉽게 토글해 보아요.
- Color — 전체 툴킷을 지원하는 색상 시스템을 배우고 커스터마이즈해 보아요.
- Color modes — 기본 라이트 모드와 새로운 다크 모드를 살펴보거나, 직접 커스텀 색상 모드를 만들어 보아요.
- Components — 거의 모든 컴포넌트를 반응형으로, 기본 클래스와 수정자 클래스로 어떻게 구축하는지 배워 보아요.
- CSS variables — 빠르고 미래 지향적인 디자인과 개발을 위해 Bootstrap의 CSS 커스텀 프로퍼티를 사용해 보아요.
- Optimize — 프로젝트를 가볍게, 반응적으로, 유지보수하기 쉽게 유지해 최고의 경험을 제공해 보아요.
개요 (Overview)
Bootstrap을 커스터마이즈하는 방법은 여러 가지가 있어요. 가장 좋은 경로는 프로젝트, 빌드 도구의 복잡성, 사용하는 Bootstrap 버전, 브라우저 지원 등에 따라 달라져요.
우리가 선호하는 두 가지 방법은 다음과 같아요:
- 패키지 매니저로 Bootstrap을 사용해 소스 파일을 사용하고 확장하는 방법
- Bootstrap의 컴파일된 배포 파일이나 jsDelivr를 사용해 Bootstrap 스타일에 추가하거나 재정의하는 방법
모든 패키지 매니저의 사용법을 여기서 자세히 다룰 수는 없지만, 자신의 Sass 컴파일러로 Bootstrap을 사용하는 방법에 대한 몇 가지 지침은 제공할 수 있어요.
배포 파일(distribution files)을 사용하고 싶다면, 시작하기 페이지에서 해당 파일을 포함하는 방법과 예시 HTML 페이지를 확인해 보세요. 그런 다음 사용하려는 레이아웃, 컴포넌트, 동작에 대한 문서를 참조하면 돼요.
Bootstrap에 익숙해지면서, 전역 옵션을 활용하는 방법, 색상 시스템을 사용하고 변경하는 방법, 컴포넌트를 구축하는 방법, 점점 늘어나는 CSS 커스텀 프로퍼티 목록을 사용하는 방법, Bootstrap으로 빌드할 때 코드를 최적화하는 방법에 대한 자세한 내용을 계속 살펴보세요.
CSP와 임베디드 SVG (CSPs and embedded SVGs)
여러 Bootstrap 컴포넌트는 브라우저와 기기 전반에 걸쳐 컴포넌트를 일관되고 쉽게 스타일링하기 위해 CSS에 임베디드 SVG를 포함해요. 더 엄격한 CSP 구성을 가진 조직을 위해, 우리는 임베디드 SVG의 모든 인스턴스(모두 background-image로 적용됨)를 문서화했으니 옵션을 더 철저히 검토할 수 있어요.
- Accordion
- Carousel controls
- Close button (alert와 modal에서 사용됨)
- Form checkboxes and radio buttons
- Form switches
- Form validation icons
- Navbar toggle buttons
- Select menus
커뮤니티 논의에 따르면, 자신의 코드베이스에서 이 문제를 해결하는 몇 가지 옵션으로는 URL을 로컬 호스팅 에셋으로 교체하거나, 이미지를 제거하고 인라인 이미지를 사용하거나(모든 컴포넌트에서 가능하진 않음), CSP를 수정하는 방법이 있어요. 우리의 권장 사항은 자신의 보안 정책을 신중히 검토하고, 필요하다면 최선의 길을 결정하는 거예요.