부트스트랩?
모든 CSS 문법을 외우면서 적용하기 힘들고 시간이 오래 걸린다.
-> 이 작업을 쉽게 사용하게끔 오픈소스 프레임워크로 만들어 놓은 것이 부트스트랩이다.
부트스트랩 사용 방법?
부트스트랩 사이트 접속 : 구글에 '부트스트랩' 검색 또는 https://getbootstrap.kr/ 접속
- 외부 파일을 로컬 컴퓨터에 직접 다운로드 받아서 사용
- CDN(Content Delivery Network) : 외부 사이트에 있는 파일을 링크해서 사용
- 코드는 https://getbootstrap.kr/docs/5.3/getting-started/introduction/ 에서 사용
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
Q. 부트스트랩 이외에 추가적인 class를 넣고 싶다면?
부트스트랩 버튼을 사용하고 class 값을 hihi 라는 것을 더 추가하고 싶을 때는 아래와 같이 class 옆에 이어붙이면 된다.
<button type="button" class="btn btn-primary hihi">Primary</button>
Q. 부트스트랩 적용 조차도 귀찮다면? -> 이미 만들어진 것을 가져온다.
https://startbootstrap.com/ 사이트에서 원하는 웹 디자인을 골라 사용한다.
