# 템플릿 사용

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

![](https://3259369343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEt4dqMM3OXQpfcv45On5%2Fuploads%2FfdODLMpWBB9ynaK7AsNl%2Fimage.png?alt=media\&token=8fbfb3be-47a2-4e29-9e67-578d23fd3672)

{% embed url="<https://getbootstrap.kr/docs/5.2/examples/>" %}

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

{% tabs %}
{% tab title="1 step" %}
화면에서 마우스 우 클릭하여 메뉴 중 **`페이지 소스 보기`**&#xB97C; 클릭 합니다.\
(메뉴 화면은 컴퓨터 마다 다를 수 있으니 비슷한 메뉴를 찾아 클릭해 주세요)

![](https://3259369343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEt4dqMM3OXQpfcv45On5%2Fuploads%2FymcUDkZc5CJqKybtGz9B%2Fimage.png?alt=media\&token=9257770f-1111-466c-a5a9-3981a6d809f3)![](https://3259369343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEt4dqMM3OXQpfcv45On5%2Fuploads%2FZKYgLM0NEPHBa2csUMdV%2Fimage.png?alt=media\&token=3f0425ed-23de-4696-9d36-5338d585a1de)

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

<figure><img src="https://3259369343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEt4dqMM3OXQpfcv45On5%2Fuploads%2FL3z1aqGB69jzrWBaYttT%2Fimage.png?alt=media&#x26;token=83942632-afce-4c56-9669-10cca862e705" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2 step" %}
전체 코드 중 <mark style="color:blue;">**`<main></main>`**</mark>태그를 찾아 전부 복사하여 줍니다.

<figure><img src="https://3259369343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEt4dqMM3OXQpfcv45On5%2Fuploads%2FQKeg4VfOmoVq3DDZ5lWJ%2Fimage.png?alt=media&#x26;token=2a561431-b2e1-4afb-a116-6c463cfde594" alt=""><figcaption></figcaption></figure>

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

```html
<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 버튼을 눌러 웹페이지를 확인해 보세요!

<figure><img src="https://3259369343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEt4dqMM3OXQpfcv45On5%2Fuploads%2FY7WBi6euH2KtTbxfuYm6%2Fimage.png?alt=media&#x26;token=bb74888c-aaab-4f5b-896d-9305164468da" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}