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