📚템플릿 사용

Bootstrap 상단의 예시 메뉴를 클릭하면 다양한 템플릿들을 사용할 수 있습니다. 우리는 이 중에서 Jumbotron 이란 템플릿을 사용합니다.

예시getbootstrap

각 단계별 Bootstrap을 사용하여 페이지의 내용을 채워 넣어 보세요!

1 step

화면에서 마우스 우 클릭하여 메뉴 중 페이지 소스 보기를 클릭 합니다. (메뉴 화면은 컴퓨터 마다 다를 수 있으니 비슷한 메뉴를 찾아 클릭해 주세요)

우리가 만들고 있는 HTML 코드들이 보인다면 성공!

2 step

전체 코드 중 <main></main>태그를 찾아 전부 복사하여 줍니다.

기존 HTML의 코드에서 <main>태그를 삭제하고 아래 코드를 붙여 넣어 줍니다.

<main>
  <div class="container py-4">
    <div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="h-100 p-5 text-bg-dark rounded-3">
          <h2 class="display-5 fw-bold">😸 CAT</h2>
          <p class="col-md-7 fs-4">오늘부터 당신은 고양이 집사!<br>준비 되었나요?</p>
          <a href="cat.html">
          <button class="btn btn-outline-light" type="button">사진보기</button>
            </a>
        </div>
      </div>
      <div class="col-md-6">
        <div class="h-100 p-5 bg-light border rounded-3">
          <h2 class="display-5 fw-bold">🐶 DOG</h2>
          <p class="col-md-10 fs-4">이 사진을 보고도 가만히 있을 수 있나요?<br>
            사랑스러운 강아지 사진 모음</p>
          <a href="dog.html">
          <button class="btn btn-outline-secondary" type="button">사진보기</button>
          </a>
        </div>
      </div>
    </div>
    <footer class="pt-3 mt-4 text-muted border-top">
      &copy; metaway
    </footer>
  </div>
</main>

Run 버튼을 눌러 웹페이지를 확인해 보세요!