<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
.wr{
width:900px;
margin:auto;
}
</style>
</head>
<body>
<div class="wr">
<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://file.mk.co.kr/meet/neds/2015/03/image_readtop_2015_200050_14252899811789965.jpg" 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://file.mk.co.kr/meet/neds/2015/03/image_readtop_2015_200050_14252899811789965.jpg" 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://file.mk.co.kr/meet/neds/2015/03/image_readtop_2015_200050_14252899811789965.jpg" 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://file.mk.co.kr/meet/neds/2015/03/image_readtop_2015_200050_14252899811789965.jpg" 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://file.mk.co.kr/meet/neds/2015/03/image_readtop_2015_200050_14252899811789965.jpg" 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://file.mk.co.kr/meet/neds/2015/03/image_readtop_2015_200050_14252899811789965.jpg" 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>
</body>
</html>
일지
head부분에 부트스트랩 선언하는 코드를 입력하였다. 또한 클래스 wr을 style안에 선언하였다.
바디부분에 부트스트랩에서 가져온 위쪽 메인과 아래쪽 카드6개를 추가하였고
점보와 카드 동시에 중간에 배치하기 위에 하나의 div로 묶어 div에 wr 클래스를 주어
가로길이를 줄여 고정한뒤 margin : auto로 중간에 배치하였다.
font-weight:bold 은 폰트 굵기를 수정하는 코드이다.
margin: 50px 50px 50px 50px 없이 한번반 50px입력하면 4면이 모두 적용되고 특정면은 auto로할수있다.
border-radius에 px를 주면 모서리가 둥근 정도이다.
자바스크립트
onclick은 클릭될시,
fuction a() 함수 선언
alert 알림,경고
'html과CSS 초급' 카테고리의 다른 글
| 2021-06-14 (html의 split과 $('#~~~') 구문 사용하기) (0) | 2021.06.14 |
|---|---|
| 2021-06-11 (J쿼리 $('#~~~') 사용하기) (0) | 2021.06.11 |
| 2021-06-10 (Bootstrap 사용하기와 html꾸미기) (0) | 2021.06.10 |
| 2021-06-08 (html 백그라운드이미지 사용하기) (0) | 2021.06.08 |
| 2021-06-07 (html 문단 나누는 태그들) (0) | 2021.06.07 |