Bootstrap 상단의 예시 메뉴를 클릭하면 다양한 템플릿들을 사용할 수 있습니다.
우리는 이 중에서 Jumbotron 이란 템플릿을 사용합니다.
각 단계별 Bootstrap을 사용하여 페이지의 내용을 채워 넣어 보세요!
화면에서 마우스 우 클릭하여 메뉴 중 페이지 소스 보기를 클릭 합니다.
(메뉴 화면은 컴퓨터 마다 다를 수 있으니 비슷한 메뉴를 찾아 클릭해 주세요)
우리가 만들고 있는 HTML 코드들이 보인다면 성공!
전체 코드 중 <main></main>태그를 찾아 전부 복사하여 줍니다.
기존 HTML의 코드에서 <main>태그를 삭제하고 아래 코드를 붙여 넣어 줍니다.
Run 버튼을 눌러 웹페이지를 확인해 보세요!
Last updated
<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">
© metaway
</footer>
</div>
</main>