개발일지/웹개발
부트스트랩, CSS 모음집
E-room
2022. 6. 29. 23:40
728x90
1. bootstrap
미리 만들어 놓은 좋은 CSS들을 모아둔 프레임워크.
다른 사람들이 미리 만들어 놓은 CSS를 내 HTML 파일에 적용하는 것이기에, style시트 파일 분리와 원리가 동일.
2. 사용법 - https://getbootstrap.com/docs/5.2/getting-started/introduction/
겟부트스트랩이라는 사이트에서 시작할 수 있는 코드를 만들어 놓았다.
해당 코드를 그대로 옮겨서 사용하면 된다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
3. CSS 가져오기
2번의 링크에서 마음에 드는 CSS를 찾아 코드를 복사한다.
<body> 부분에 붙여넣는다.
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
4. 조정
이후 입맛에 맞게 조금씩 수정하면 된다.
728x90