부트스트랩 버튼 색상 커스텀하기
부트스트랩 5을 사용해 UI를 만들고 있다. 부트스트랩은 편리하지만 primary 버튼의 색상 등 변경하고 싶은 부분이 있어 커스터마이징 방법을 검색해보았다.
하지만 대부분의 글들이 기본적인 부분에 대해서는 당연하게 생략하고 있어 NPM이나 SASS가 무엇인지 알지 못하는 나로서는 이해하기 힘들었다. 나와 같은 분들을 위해 아주 기초부터 부트스트랩 CSS를 커스텀하는 방법을 정리해보려 한다.
부트스트랩
부트스트랩은 CSS 프레임워크이다. 이미 만들어져 있는 CSS 클래스를 조합하여 쉽게 반응형 UI를 구현할 수 있다.
예를 들어 버튼(<button>) 요소의 경우 class="btn"을 넣어주면 부트스트랩을 통해 일관적인 버튼 형태를 만들 수 있다. class="btn btn-primary"과 같이 추가 버튼 속성을 넣어줄 수 있는데, btn-primary는 primary 라는 부트스트랩의 테마 색상을 적용한 버튼이다.
부트스트랩의 primary 색상은 파란색이다. 위의 이미지는 btn-primary를 적용한 버튼 예시이다. ( 부트스트랩의 다양한 테마 색상은 🔗 Bootstrap 5 Theme Colors 참조 )
이 부트스트랩의 기본 primary 테마 색상을 변경해보려고 한다.
SASS
부트스트랩 CSS 파일은 SASS 기술을 통해 만들어진다. 순수 CSS는 반복이 굉장히 많다. SASS는 변수, 반복문 등을 사용할 수 있어 CSS를 편리하게 만들어준다. 단 브라우저는 SASS 파일을 이해할 수 없기 때문에 CSS로 컴파일하는 과정이 필요하다.
참고로 SCSS는 SASS에서 사용하지 않는 중괄호({})를 추가하여 가독성을 높이는 등 SASS를 보완한 기술인데 SASS와 완벽히 호환된다. 부트스트랩을 커스텀하기 위해 소스를 다운로드 해보면 파일 확장자는 SCSS인데 부트스트랩 공식 페이지의 커스텀 가이드는 SASS로 설명하고 있다. 둘을 엄격히 구분할 필요가 없기 때문인 것 같다.
커스터마이징
1) npm 다운로드
부트스트랩 소스가 node.js 패키지로 되어있어 npm이 필요하다. npm은 node.js 패키지를 다운받을 수 있는 리포지토리 서버이자 패키지 매니저이다. 부트스트랩 패키지를 다운로드 하고 관리하기 위해 npm을 설치해주자.
나는 Homebrew에 node가 다운로드 되어 있어서 npm도 있는 상태였다. 설치가 되어있다면 터미널에서 npm 명령어를 사용할 수 있다.
2) npm 시작하기
npm init -y
프로젝트 루트 디렉토리에서 위 명령어를 실행해주면 package.json 파일이 생긴다. 이 파일은 Json 형식으로 패키지에 대한 정보를 담고있는 문서이다. 이 파일을 통해서 이력을 관리하고 다른 환경에서도 편리하게 재빌드가 가능하다고 한다. ( 🔗 [개발새발] package-lock.json은 왜 필요할까? )
3) 부트스트랩 소스 다운로드
npm install bootstrapnpm을 통해 부트스트랩 소스를 다운로드 해 준다. 설치된 node_modules 디렉토리 내에는 CSS로 컴파일되기 전 SCSS 형태의 소스가 들어있다.
또한 package-lock.json도 생성된 것을 확인할 수 있다. 이 파일과 이전 단계에서 생성한 package.json을 Git으로 관리하면 크기가 큰 node_modules를 Git에 올리지 않아도 두 문서의 정보를 통해서 다른 환경에서도 동일하게 빌드가 가능하다고 한다.
4) 커스텀 SCSS 파일 생성
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scssscss 디렉토리를 만들고 커스터마이징할 내용을 담을 custom.scss 파일을 생성했다. 디렉토리와 파일 명은 임의로 정해도 된다. 부트스트랩은 커스텀 파일을 원본 파일과 별도로 관리하는 것을 권장하고 있다. ( 🔗 [BootStrap 5] 사용자지정 - Sass 파일 구조 )
custom.scss는 내가 생성한 파일이기 때문에 Git에 올려주어야 한다.
5) 소스 Import 하기
@import "../node_modules/bootstrap/scss/bootstrap";원본 소스를 Import 해 준다.
부트스트랩에서는 전체를 Import 하는 것보다 필요한 일부만 Import 하는 것을 권장한다고 하지만 관련 파일을 하나하나 찾는게 비효율적이고 어려운 것 같다. 또한 테마 컬러만 변경해보아도 관련된 파일이 많아 보여서 그냥 전체 소스를 가져오기로 했다.
6) 테마 컬러 변수 값 수정하기
$primary: #007db6;
@import "../node_modules/bootstrap/scss/bootstrap";primary 색상 값은 $primary 라는 변수에 담겨 SCSS의 여러 부분에 적용된다. SCSS 파일에서는 변수가 사용되지만 이것이 컴파일되면서 CSS 파일에서는 실제 값인 #007db6로 적용되는 것이다.
7) SCSS ➡ CSS 컴파일
sass scss/custom.scss src/main/webapp/resources/css/custom.csssass [scss파일경로] [css파일경로] 명령을 통해 컴파일 해 준다. sass 명령을 사용하려면 SASS를 설치해야 한다. (설치 : npm install -g sass)
8) 스타일시트 경로 지정
<!-- Bootstrap 5 커스텀 CSS -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/custom.css">CSS 스타일 시트 경로를 지정해준다. 부트스트랩의 모든 소스가 이 CSS 파일로 컴파일되었기 때문에 CDN으로 별도로 가져올 필요가 없다.
확인
지정한 색상으로 잘 변경된 것을 확인할 수 있다!
🔗 References
