07_반응형 웹(2) : 미디어쿼리

미디어쿼리(Media Query)

화면크기 마다 다른 CSS를 적용하는 것 (화면 사이즈를 인식)

 

3개의 반응형 분기점

1) pc : 1024px ~

2) 테블릿 가로, 테블릿 세로 : 768px ~ 1023px

3) 모바일 가로, 모바일 세로 : ~ 768px

 

미디어쿼리 작성법

css <style>내부에 작성

@media (조건문) {

       적용할 css

}

---

 

 

#resposive_2.html

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

<style>

      .div {
         width: 200px;
         height: 200px;
         border: 1px solid black;
         background-color: red;
      }

 

      @media(min-width:900px) {
         .div {
            background-color: green;
         }
      }

 

      @media(max-width:900px) {
         .div {
            background-color: yellow;
         }
      }

</style>

 

900px 이전까지는 배경색이  노랑색이다.

 

900px을 넘어가면 배경색이 초록색이다.

---

 

   <ul class="navi">
      <li><a href="#">테스트1</a></li>
      <li><a href="#">테스트2</a></li>
      <li><a href="#">테스트3</a></li>
      <li><a href="#">테스트4</a></li>
   </ul>

<style>

      .navi {
         width: 800px;
         margin: 0;
         padding: 0;
         list-style-type: none;
      }

 

      .navi>li {
         border: 1px solid black;
         float: left;
         width: calc(100%/4);
         box-sizing: border-box;
         background-color: darkblue;
      }

 

      .navi>li>a {
         color: white;
      }

 

      @media(max-width:700px) {
         .navi {
            width: 100%;
         }
         .navi>li {
            width: 100%;
            float: none;
         }
      }

</style>

최대넓이 700px 까지

 

최대넓이 700px 초과 시