개발 여정/FrontEnd

[BootStrap] 레이아웃 구조 (2) :: d-flex 이용해서 header, section, footer 나누기

calm-lee 2021. 9. 9. 18:52

 

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이 들어가 있음.