728x90
728x90
구글 폰트 바로가기
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
style.css
body{
font-family: 'Nanum Myeongjo', serif;
font-weight: 800;
}
.height{
/* height: 1000px; */
min-height: 60vh; /* 최소한의 공간 */
}
brap-Project1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>부트스트랩 카드</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="/js/all.js"></script>
<!-- 구글폰트링크 -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 컨테이너시작 -->
<div class="container bg-secondary text-white">
<div class="row">
<div class="col">
<h1 class="text-danger mt-4 mb-4">Basic</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil sit
dignissimos cum repudiandae? Qui dolores laborum, quisquam at pariatur voluptas!
Blanditiis maxime reiciendis id dolore sapiente assumenda suscipit ut!</p>
<button type="button" class="btn btn-danger m-2 p-2">Danger Button</button>
<button type="button" class="btn btn-primary m-3 p-3">Primary Button</button>
</div>
</div>
</div>
<!-- 컨테이너 끝 -->
<!-- 컨테이너 플루이드 시작 -->
<div class="container-fluid bg-warning text-dark p-5">
<div class="row">
<div class="">
<h1 class="display-1">Display-1</h1>
<p class="display-4">Display-4</p>
<p class="text-success lead px-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum sint incidunt
accusamus aspernatur magnam doloremque nisi architecto illum vel ex nobis voluptates tempore voluptatum,
aliquam ut animi esse eligendi facilis.</p>
<button class="btn btn-dark text- mt-4">btn dark</button>
<button class="btn btn- text-muted mb-4">btn dark</button>
<button class="btn btn-secondary text-primary mx-">btn dark</button>
</div>
</div>
</div>
<!-- 컨테이너 플루이드 끝 -->
<!-- 섹션 1 시작 -->
<section id="skills" class="bg-dark p-5">
<div class="container">
<div class="row text-center height algin-items-center"> <!-- 세로정렬 -->
<div class="col">
<h1 class="text-white">section example</h1>
<p class="display-4 text-warning">paragraph display</p>
<p class="text-info px-5 text-right">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis unde
eaque hic, asperiores quibusdam, aut ducimus necessitatibus, libero perspiciatis ipsam aperiam fugiat
temporibus aspernatur tempore harum nam reprehenderit voluptatum tenetur.</p>
<p class="text-light text-left py-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem
veritatis veniam, placeat accusamus accusantium maxime, alias, temporibus hic recusandae facilis corporis
eligendi praesentium expedita. Nesciunt nisi architecto deserunt inventore error?</p>
<button type="button" class="btn btn-warning text-secondary">btn warning</button>
<button type="button" class="btn btn-info text-dark">btn info</button>
<button type="button" class="btn btn-light text-dark">btn light</button>
</div>
</div>
</div>
</section>
<!-- 섹션 1 끝 -->
<!-- 섹션 2 시작 -->
<section class="bg-light">
<div class="container">
<div class="row height align-items-center justify-content-center"> <!-- row는 flex랑 비슷한 역할. justify-content-center: 가로정렬. 위 아래 동일하게 여백이 생긴다. -->
<div class="col-10">
<!-- col은 전체 12개가 있고 그 중 10이니까 마진에 2 할당 -->
<h1 class="display-2 text-danger text-uppercase">Col-10</h1>
<p class="text-muted lead my-4">my-4: 마진을 y축으로 4만큼. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum magni eum, maiores ad aperiam vitae accusantium consectetur beatae rem eveniet quasi sed libero enim rerum doloremque voluptatum nostrum quod corporis!</p>
<a href="" class="btn btn-secondary text-danger text-uppercase p-3 mt-3">explore</a>
<a href="" class="btn btn-dark text-light text-uppercase p-3 mt-3">explore</a>
</div>
</div>
</div>
</section>
<!-- 섹션 - 2 끝 -->
<!-- 부트스트랩 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>728x90
728x90
'Frameworks > Bootstrap' 카테고리의 다른 글
| 부트스트랩 (17) 모달 팝업 (modal) (0) | 2020.02.12 |
|---|---|
| 부트스트랩 (16) chart.js 로 차트 그리기 (1) | 2019.07.17 |
| 부트스트랩 (14) Carousel 슬라이드쇼 (0) | 2019.07.10 |
| 부트스트랩 (13) 카드 (프로필 꾸미기) (0) | 2019.07.10 |
| 부트스트랩 (12) Collapse 메소드 (0) | 2019.07.10 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
