부트스트랩이란?
트위터의 개발자가 만든 모바일 중심의 UI 프레임워크로
오픈소스로 공개되었기에 저작권 걱정 없이 사용할 수 있음
개요
웹페이지의 다양한 구성요소들을 미리 만들어 놓고 쉽고 빠르게 만들기 위함
미리 정의해 놓은 구성요소들을 사용하다보니 부트스트랩 기반 웹사이트들은 비슷한 느낌이 들음
설치
공식 사이트로 접속
2. CDN 복사
3. HTML에서 HEAD에 붙여넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<!--스크립트는 바디태그 끝부분에 넣어줘야 포퍼먼스 향상이 도움이 되므로 여기에 넣어줌-->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>'HTML_CSS' 카테고리의 다른 글
| Bootstrap - form Style (0) | 2020.05.31 |
|---|---|
| bootstrap - Grid System (0) | 2020.05.30 |
| HTML- img 태그 (0) | 2020.05.02 |
| HTML- link태그 (0) | 2020.05.02 |
| HTML - list 출력 (0) | 2020.05.02 |