힙한취미코딩

파이썬을 처음 공부해서 만든 부트스크랩 예제이다

가장 기본적인 HTML , CSS가 사용 되었으며

에는 부트스크랩 시작 코드가 있다 실행시키니 게속 에러가 났다 무었때문인지 몰랐는데 다음날 다시보니 margin 인데 magin으로 적었고 with의 폭이 90px이 아닌 900px이었다 이렇게 간단한 에러룰 하루종일 못찾아 끙끙 앎다니 어이가 없었다

처음으로 에러난 소스이고 스스로 답을 찾은 코드라 기억에 남기고 싶다

<!-- 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: 900px;
        margin: auto;
    }
</style>

<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-columns">
        <div class="card">
        <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/51642/338463_medium_1553659567.jpg?1553659567" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
        <div class="card">
        <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/51642/338463_medium_1553659567.jpg?1553659567" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
        <div class="card">
        <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/51642/338463_medium_1553659567.jpg?1553659567" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
        <div class="card">
        <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/51642/338463_medium_1553659567.jpg?1553659567" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
        <div class="card">
        <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/51642/338463_medium_1553659567.jpg?1553659567" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
        <div class="card">
        <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/51642/338463_medium_1553659567.jpg?1553659567" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
</div>