목차
.jumbotron (점보트론)
.page-header (페이지헤더)
.jumbotron (점보트론)
모서리가 둥근 회색 간판 상자
1. 상자 안의 텍스트 글씨를 키움.
2. 최대너비 설정: .container 밖에 배치.
.container 클래스 안 : 최대너비 X
<div class="container">
<div class="jumbotron">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">바로가기</a></p>
</div>
<p>보통 글씨</p>
</div>
결과보기
.container 클래스 밖 : 최대너비 O
<div class="jumbotron">
<h1>홈짱닷컴 Homzzang.com</h1>
<p><a class="btn btn-primary btn-lg" href="#" role="button">바로가기</a></p>
</div>
<div class="container">
<p>홈페이지 제작 유지보수 관리</p>
</div>
결과보기
.container 클래스 밖: 최대너비 O
<div class="jumbotron">
<h1>홈짱닷컴 Homzzang.com</h1>
<p><a class="btn btn-primary btn-lg" href="#" role="button">바로가기</a></p>
<div class="container">
<p>홈페이지 제작 유지보수 관리</p>
</div>
</div>
결과보기
.page-header (페이지헤더)
<div class="page-header">
<h1>홈짱닷컴 Homzzang.com <small> 홈페이지 제작관리</small></h1>
</div>
결과보기
<h1> 태그를 둘러싸는 옅은 회색 배경상자 역할.
CSS 정의
.jumbotron {
padding-right: 60px;
padding-left: 60px;
border-radius: 6px;
}
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
