[45일] bootstrap (1) - bootstrap이란?, 설치 및 사용 방법

Bootstrap은 HTML, CSS, JavaScript Framework로 Bootstrap 3, 4, 5가 있다.

웹페이지 개발 시 frontend(UI, View)단을 구현하기 위한 무료 오픈소스이다. 주로 CSS, 레이아웃, 반응형 웹 구현 시 많이 사용한다.

 

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

W3Schools Free Online Web Tutorials

https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

Bootstrap Get Started

 

 

Bootstrap 사용방법

1. 직접 링크 (CDN)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 

2. 라이브러리 다운

https://getbootstrap.com/docs/5.2/getting-started/download/

Download

 

 

 

bootstrap을 사용하기 위해서는 또 하나, meta 태그를 추가하여야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1">

모든 장치에서 웹사이트를 잘 보이게 하기 위해 뷰포트 설정하는 것으로 Desktop, Tablet, Mobile 등 각 장비에 따라서 반응하도록 하는 것이다. 반응형 웹이 적용되려면 추가해야 한다.