07_반응형 웹(1) : 레이아웃

반응형 레이아웃

min-width	요소의 최소 너비 지정
min-height	요소의 최소 높이 지정
max-width	요소의 최대 너비 지정
max-height	요소의 최대 높이 지정

---

반응형 웹을 만들기 위한 viewport단위

 

viewport : 사용자에게 보여지는 웹페이지의 영역으로 화면이 바뀔 때마다 화면에 맞춰 스타일이 바뀌게 되는 웹 형태

css작업을 할 때 주로 px(픽셀)단위를 사용하지만 유동단위인 %를 사용하면 좀 더 유연한 사용이 가능하다.  뷰포트를 기준으로 하는 단위를 사용하여 반응형 웹을 좀 더 쉽게  구현할 수 있다.

 

vw(Viewport Width)	1vw = 뷰포트 너비의 1%
vh(Viewport Height)	1vh= 뷰포트 높이의 1%

---

 

 

#responsive_1.html

    <h1>반응형 웹단위</h1>
    <hr>
    <div class="container">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
    </div>
    <hr>

    <div class="container">
        <div class="div2">test123456789</div>
        <div class="div2"></div>
        <div class="div2"></div>
        <div class="div2"></div>
    </div>
    <hr>

    <div class="container">
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
    </div>
    <hr>

    <div class="wrap">
        <div class="div4"></div>
    </div>
    <hr>

    <ul class="navi">
        <li><a href="#">JAVA</a></li>
        <li><a href="#">ORACLE</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JAVASCRIPT</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Responsive Web</a></li>
    </ul>

---

 

 

 

<style>

        .container {
            /*전체 브라우저 창의 80% 사용*/
            width: 80%;
            background-color: lightgray;
            padding: 50px;
            overflow: hidden;
        }

 

첫번째 div는 widht를 px로 고정했다.

        .div1 {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            float: left;
            background-color: red;
            border: 1px solid black;
        }

 

두번째 div는 widht를 부모의 15%만 차지하도록 했다.

        .div2 {
            width: 15%;
            height: 100px;
            box-sizing: border-box;
            float: left;
            background-color: red;
            border: 1px solid black;
        }

 

세번째  div는 최소너비(min-width)와 최대너비(max-width)를 지정했다.

        .div3 {
            width: 15%;
            /*min-width : 요소의 최소 너비 지정*/
            min-width: 80px;
            /*max-width : 요소의 최대 너비 지정*/
            max-width: 120px;
            height: 100px;
            box-sizing: border-box;
            float: left;
            background-color: red;
            border: 1px solid black;
        }

</style>

 

---

<style>

        .wrap {
            width: 800px;
            height: 300px;
            background-color: lightblue;
            padding: 50px;
        }

viewport단위(vw/vh)를 사용했다.

        .div4 {
            /*1vw(Viewport Width) = 뷰포트 너비의 1%*/
            width: 100vw;
            /*1vh(Viewport Height) = 뷰포트 높이의 1%*/
            height: 20vh;
            background-color: lightyellow;
            position: relative;
            left: -50px;
        }

</style>

 

[ 창을 좁게 했을 때 ]

 

[ 창을 넓게 했을 때 ]  800px의 배경을 넘어서 뷰포인트의 100%를 차지하고 있음을 볼 수 있다.

 

[ 창의 높이를 줄였을 때 ]

---

 

 

 

<style>

최소너비(min-width)를 900px로 지정했다.

        .navi {
            /*부모인 body태그의 넓이 사용*/
            width: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            list-style-type: none;
            min-width: 900px;
        }

 

        .navi>li {
            float: left;
            width: calc(100%/7);
        }

 

        .navi>li>a {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
            text-decoration: none;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid black;
            color: black;
        }

</style>

 

[창을 좁게 했을 때] min-width를 900px로 지정했기 때문에 스크롤바가 생기고 크기는 더이상 줄어들지 않는다.

 

[창을 넓게 했을 때]