HOWTO · CSS
부트스트랩 CSS 재정의
맞춤 CSS로 부트스트랩 CSS를 재정의하는 간단한 가이드입니다.
이 페이지의 내용
이 기사는 Bootstrap으로 알려진 유명한 CSS UI 프레임워크에 관한 것입니다. 사용자 지정 스타일로 Bootstrap CSS를 재정의하는 프로세스에 대해 설명합니다.
부트스트랩 개요
일반 CSS만 사용하는 것보다 Bootstrap CSS를 사용하면 반응형 웹 사이트를 더 빠르고 쉽게 만들 수 있습니다.
이 오픈 소스 툴킷은 미리 디자인된 템플릿과 구성 요소를 제공하여 부트스트랩 버튼, 양식 및 테이블과 같은 중요한 디자인 구성 요소로 레이아웃을 빠르고 쉽게 만들 수 있기 때문입니다.
그러나 절차는 재사용 가능한 코드 조각을 복사하여 붙여넣는 것만큼 간단하지 않습니다. 먼저 Bootstrap 템플릿과 구성 요소를 사용자 지정하여 웹 사이트가 고유한 브랜딩을 정확하게 나타내는지 확인해야 합니다.
예를 들어 Bootstrap의 10가지 색상 유틸리티 클래스 중 하나보다 사용자 지정 색상을 선호할 수 있습니다. 또는 부트스트랩에서 그리드 레이아웃의 중단점을 수정할 수 있습니다.
고유한 버튼에 대해 .btn-cstm 클래스와 같은 사용자 지정 클래스를 포함할 수도 있습니다. 권장되지는 않지만 부트스트랩 코어 파일을 직접 편집하여 웹 사이트를 조정할 수 있습니다.
부트스트랩 CSS 수정
부트스트랩 기본 스타일시트를 직접 수정하는 것은 어려울 것입니다. 변경 사항을 기억하기가 더 어려워지고 개정된 버전의 부트스트랩으로 업데이트하는 것이 훨씬 더 어려워집니다.
업그레이드 시 코어 파일을 교체해야 하므로 모든 개인 설정이 손실됩니다. 그러나 Bootstrap 소스 코드를 수정하지 않고도 변경할 수 있습니다.
절차를 자세히 살펴 보겠습니다.
부트스트랩 스타일 재정의
웹 사이트에서 부트스트랩 이외의 사용자 정의 스타일을 추가해야 하는 경우 다른 외부 스타일 시트를 추가하십시오. 두 스타일 시트를 로드하는 방법에 따라 이러한 재정의된 스타일을 클래스 및 ID 선택기에 적용합니다.
- 부트스트랩이 있는 것.
- 사용자 정의 스타일시트가 있는 것.
예를 들어 부트스트랩에는 버튼에 대한 클래스가 있습니다(예: btn-primary). 해당 클래스의 경우 Bootstrap CSS에서 설정한 글꼴 크기는 16px입니다. 글꼴 크기를 21px로 변경해야 하는 경우 사용자 지정 스타일시트에서 이 클래스를 재정의할 수 있습니다.
첫 번째 단계는 customStyles.css와 같은 사용자 지정 스타일 시트를 만드는 것입니다. 스타일 시트는 다음과 같습니다.
.btn-primary{
font-size:21px;
}
다음과 같이 Bootstrap CSS를 포함시킨 후 HTML 페이지에 이 시트를 포함할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="customStyling.css">
</head>
<body>
<h1>Custom Bootstrap demo</h1>
<button class="btn-primary">Demo</button>
</body>
</html>
그 상태 변화를 다이어그램으로 나타내면 다음과 같습니다.
Bootstrap만으로는 버튼이 16px로 계산됩니다. 맞춤 스타일시트가 Bootstrap 뒤에 로드되면 같은 버튼이 21px로 계산되고 나머지는 모두 상속됩니다.
출력에서 font-size 이외의 속성이 기본 Bootstrap CSS에서 상속되고 font-size 속성만 새 값으로 업데이트되는 것을 볼 수 있습니다.
Bootstrap CSS를 재정의하고 웹 사이트에 사용자 지정 스타일을 추가하는 가장 쉬운 방법 중 하나입니다.