부트스트랩(Bootstrap) 사용하기
1. 부트스트랩(Bootstrap)이란?
부트스트랩(BootStrap)은 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JS로 만들어 놓은 프레임워크 및 라이브러리이다.
2. 부트스트랩(Bootstrap) 가져오기
부트스트랩 가져오는 곳(영문) 링크
부트스트랩 가져오는 곳(한글) 링크
위 링크에 들어가보면 다양한 부트스트랩 Button을 가져올 수 있다.
Button 이 외에도 다른 탭을 선택하면 여러 부트스트랩을 사용해 볼 수 있다.
3. 부트스트랩 선택하기
여기서 마음에 드는 부트스트랩을 선택한 다음 아래에서 자신이 선택한 버튼의 코드를 복사한다.
4. 코드에 적용하기
부트스트랩을 코드에 적용하기 위해서는 우선 <head> 부분에 아래처럼 부트스트랩을 가져오기 위한 선행 작업을 해두어야한다.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>그리고 아래 <body> 부분에 아까 선택한 버튼의 코드를 붙여넣는다.
<body>
<button type="button" class="btn btn-danger">Danger</button>
</body>그러면 아래 그림처럼 부트스트랩이 적용된다.
코딩하는 것이 즐거운 개발자!