뼈대
https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/06.+%EB%82%98%ED%99%80%EB%A1%9C%EB%A9%94%EB%AA%A8%EC%9E%A5%EB%BC%88%EB%8C%80.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
.wrap{
width:300px;
margin:auto;
}
</style>
</head>
<body>
<div class ='wrap'>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="card-group">
<div class="card">
<img class="card-img-top" src="data:image/png;base64,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" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</body>
</html>