부트스트랩(Bootstrap)은 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와주는 도구입니다.
반응형 웹이란, 사용자가 어떤 기기(스마트폰, 태블릿, 컴퓨터 등)로 웹사이트에 접속하든지 그 화면 크기에
맞게 자동으로 디자인이 조정되는 웹사이트를 말합니다.
2025년 1월 현재의 부트스트랩 버전은 부트스트랩 5입니다.
부트스트랩은 웹사이트의 디자인 요소(버튼, 이미지, 텍스트 등)가 화면 크기에 맞게 자동으로 조정되도록 해줍니다. 예를 들어, 작은 화면에서는 버튼이나 메뉴가 자동으로 크기가 줄어들고, 큰 화면에서는 더 넓게 펼쳐져 보입니다.
부트스트랩은 12개의 그리드 시스템을 제공해요. 이 시스템을 사용하면 화면을 여러 개의 '칸'으로 나누어 각 칸에 콘텐츠를 배치할 수 있습니다. 그리드 시스템 덕분에 화면 크기가 달라져도 콘텐츠가 깨지지 않고, 자동으로 잘 배치되도록 돕습니다.
부트스트랩은 미디어 쿼리라는 기술을 활용하여, 화면의 크기에 따라 다른 스타일을 적용할 수 있도록 해줍니다. 예를 들어, 작은 화면에서는 네비게이션 메뉴를 숨기거나, 큰 화면에서는 메뉴가 가로로 펼쳐지는 방식으로 다르게 보이도록 할 수 있습니다.
(1) 스마트폰에서 웹사이트를 열면, 메뉴가 세로로 쭉 나열되고 버튼이 커지거나 줄어들어 화면에 맞게 보여집니다.
(2) 컴퓨터 화면에서는 같은 웹사이트가 가로로 넓게 펼쳐져, 여러 가지 내용이 한 번에 보일 수 있도록 디자인됩니다.
(3) 이렇게 부트스트랩을 사용하면, 복잡한 설정 없이 모든 기기에서 잘 보이는 웹사이트를 쉽게 만들 수 있습니다.
부스트스랩을 사용하려면 CDN(Content Delivery Network) 서버 주소를 <head> 태그 안에 포함시키면 됩니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
다음은 부트스트랩을 이용하여 단락을 꾸민 예입니다.
다음은 부트스트랩을 이용하여 만든 세 개의 열과 반응형 콘테이너의 예입니다. 브라우저 창의 크기를 줄이면 자연스럽게 열들이 조절되고 있음을 알 수 있습니다.