css에 추가적인 디자인을 넣고자 한다면 style 태그를 이용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", intial-scale="1"> <!-- 웹사이트의 너비 = 장치의 너비, 초기비율은 1.0 -->
<title>테스트 프로젝트</title>
<link rel="stylesheet" href="css/bootstrap.css"> <!-- css 적용하기 -->
</head>
<body>
<style type="text/css">
.jumbotron {
background-image: url('images/back-img.jpg');
background-size: cover;
text-shadow: black 0.2em 0.2em 0.2em;
color: white;
}
</style>
<div class="container">
<div class="jumbotron">
<h1 class="text-center">테스트 프로젝트입니다.</h1>
<p class="text-center">테스트 프로젝트는 임시로 만든 사이트입니다. 공부를 위해 사용합니다.</p>
<p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">다음 페이지로 이동</a></p>
</div>
</div>
</body>
</html>.jumbotron {} : jumbotron class의 스타일을 추가 수정해줍니다.
'프론트엔드 > BootStrap' 카테고리의 다른 글
| 점보트론 컴포넌트 (0) | 2021.05.20 |
|---|---|
| Bootstrap 시작하기 (0) | 2021.05.20 |