[HTML,CSS기초]11-2.Bootstrap 사용해보기

개발자 핑구·2022년 2월 24일

코드메이트

결과물

설명

주요 코드

HTML,CSS기초[코드메이트]

목록 보기

7/9

결과물

설명

bootstrap을 사용하면 이미 만들어진 디자인 요소를 웹사이트상 링크와 코드를 통해 쉽게 불러와 사용할 수 있는 사이트이다.

주요 코드

  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>

:먼저 bootstrap을 사용하고 싶으면 head태그안에 link태그 부분을 그대로 써줘야한다.

    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
      <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck1">치킨</label>

      <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck2">피자</label>

      <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck3">햄버거</label>
    </div>

: 버튼3개가 붙어있는 코드

    <div class="card" style="width: 18rem;">
      <img src="코뮤니티.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">코뮤니티</h5>
        <p class="card-text">#파이썬#C언어#웹개발#앱 등등<br>모두를 위한 코딩 커뮤니티</p>
        <a href="https://cafe.naver.com/codeuniv" class="btn btn-primary">코뮤니티로 바로가기 Click!</a>
      </div>
    </div>