부트스트랩과 CSS 프레임워크 모음

CSS 프레임워크는 그리드·버튼·탭·테이블처럼 자주 쓰는 화면 요소를 미리 정의해 두어, 홈페이지와 관리자 화면을 빠르게 맞출 때 씁니다. Bootstrap은 컴포넌트 클래스와 자바스크립트 동작을 함께 제공하는 대표 사례이고, Tailwind처럼 유틸리티만 모은 방식도 있습니다.

버튼은 btn에 색상·크기·외곽선 클래스를 더해 만듭니다. 폼 제출, CTA, 도구 모음처럼 클릭 동작이 분명한 곳에 쓰고, 링크형 버튼과 일반 링크의 시각 차이를 맞춰 둡니다.

탭은 목록(nav)과 내용(tab-content)을 짝 지어 구성합니다. Bootstrap 4에서는 data-toggle으로 전환하고, 활성 패널에 active(또는 fade show active)를 둡니다. 탭 JS는 Bootstrap 4에서 jQuery에 의존합니다.

기본 table 클래스에 줄무늬·테두리·호버·반응형 래퍼를 더해 목록·요금표·설정표를 정리합니다. 정렬·검색·페이징이 필요하면 Bootstrap Table 같은 확장을 붙입니다.

예전 글에 연결돼 있던 Bootstrap 4 버튼·탭·테이블 데모 페이지(스타일 1~4)는 현재 사이트에서 제공되지 않습니다. 클래스 구성과 적용 포인트는 위 버튼·탭·테이블 절을 기준으로 보면 됩니다.

기본 Bootstrap 룩을 바꾸거나 시작 화면을 빠르게 잡을 때 테마·템플릿·아이콘을 함께 고릅니다. HTML 템플릿 전용 모음이 따로 있으면 그쪽으로도 이어질 수 있습니다.

Start Bootstrap

부트스트랩 (Bootstrap) 기반의 무료 템플릿과 UI 리소스를 제공하는 사이트입니다. 개발자가 바로 수정해서 사용할 수 있는 형태가 많아 랜딩페이지, 기업 사이트, 관리자 화면 제작에 널리 활용됩니다.

사이트 바로가기

Bootstrap Icons

Bootstrap Icons는 부트스트랩 팀이 만든 오픈소스 SVG 아이콘 라이브러리로, 2,000개 이상의 아이콘을 SVG·웹폰트 형태로 제공한다. Bootstrap과 함께 또는 독립적으로 사용할 수 있다.

사이트 바로가기

관리자 화면은 사이드바·카드·표·폼이 반복되므로 Bootstrap 기반 대시보드 키트를 쓰는 경우가 많습니다. 레이아웃과 컴포넌트 밀도가 맞는지를 먼저 보고, 라이선스와 유지 상태도 확인합니다.

컴포넌트형 대신 유틸리티형·무JS형·경량형을 고를 수도 있습니다. 팀 익숙도와 빌드 환경, 기존 스킨과의 충돌 여부를 기준으로 비교합니다.

같은 버튼·탭·테이블이라도 버전마다 클래스와 데이터 속성이 다릅니다. 기존 Bootstrap 4 스킨을 유지할지, 5로 올릴지에 따라 의존 라이브러리와 마크업을 함께 점검합니다.

한 프로젝트에 프레임워크를 여러 개 섞으면 클래스 충돌과 번들 크기 부담이 커집니다. 제작 방식과 유지 상태를 먼저 고른 뒤 테마·템플릿 생태계를 확인하는 편이 안전합니다.