-
HTML
<!DOCTYPE html> <html> <head><title>부트스트랩을 이용한 레이아웃</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="ex01_style.css"> <!-- bootstrap CDN link --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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> </head> </head> <body> <div id="wrap" class="container bg-dark"> <header class="header d-flex"> <div class="bg-info col-2">로고 영역</div> <nav class="bg-success col-10">메뉴 영역</nav> </header> <section class="contents d-flex"> <section class="content1 bg-warning col-6">content1 </section> <section class="content2 col-6"> <article class="bg-primary h-50">article1</article> <article class="bg-secondary h-50">article2</article> </section> </section> <footer class="footer d-flex"> <footer class="bg-danger col-1">footer logo</footer> <address class="bg-success col-10 mt-3">copyright</address> <footer class="bg-danger col-1">footer logo</footer> </footer> </body> </div> </html> CSS
#wrap{width: 1200px;} .d-flex{display: flex;} header{height: 100px;} section{height: 500px} footer{height: 80px;}*포인트
1) col-number 이용해서 가로값 주기
2) h-% 이용해서 세로값 주기
3) dv #wrap에 container class 부여해서 전체 틀 가로정렬하기
4) mt-number 통해서 margin-top 조절하기 (address 부분)
**참고
footer의 address의 height이 짧은 이유 :
Bootstrap css의 address 태그에 기본적으로 margin-bottom이 들어가 있음.
'개발 여정 > FrontEnd' 카테고리의 다른 글
[BootStrap] 의류 쇼핑몰 메인 페이지 만들기 (0) 2021.09.09 [BootStrap] 택배회사 메인 페이지 만들기 (0) 2021.09.09 [BooStrap] 레이아웃 구조 (1) :: d-flex 이용해서 header, footer 나누기 (0) 2021.09.09 [HTML/CSS] 가계부 만들기 (0) 2021.09.09 [HTML/CSS] 달력 만들기 (0) 2021.09.09