반응형 웹과 mediaquery

반응형 웹이란 다양한 화면의 크기 속에서 반응하여 보다 시각적, 디자인적으로 사용자에게 편안하게 정보를 보여주는데에서 필요로 한다. 점점 다양해지는 미디어(스마트폰, 태블릿, etc.)에서 매우 중요하다.

즉, 화면의 크기에 맞추어 웹 페이지의 각 요소들이 반응하여 최적화되는 것을 반응형 웹이라고 한다.

 

간단한 예문을 통해서 미디어 쿼리를 살펴보면 html은 <div>안에 Responsive를 입력하고 border에 효과를 주어 시각적으로 바로 확인할 수 있도록 했다.

이후 700px을 기준으로 코딩한 <div>가 보이게, 또는 보이지 않게 코딩했다.

<style>
  /* screen width >= 700px == min-width: 700px */
  @media(min-width: 700px) {
      div{
          display: none;
      }
  }
</style>

media width가 699일 때(좌) / media width가 700일 때(우)

위의 주석과 같이 700px을 기준으로  이상일때에 해당 <div>가 display:none; 이 되는 것을 확인할 수 있다.

즉, min-width: 00px의 의미는 화면의 크기가 00px 이상일때 적용한다 라는 것이다.

 

반대로 700px까지 CSS를 적용하고 싶을 때는 다음과 같이 코딩하며, 해당 결과를 확인해보면

<style>
  /* screen width <=700 == max-width: 700px */
  @media(max-width: 700px) {
      div{
          display: none;
      }
  }
</style>

media width가 701일 때(좌) / media width가 700일 때(우)

위의 주석과 같이 700px을 기준으로 700px까지만 <div>가 display:none; 이 되는 것을 확인할 수 있다.

즉, max-width: 00px의 의미는 화면의 크기가 00px까지만 적용한다 라는 것이다.

 

이를 통해 각 반응형웹을 통해서 화면의 디자인, 배치요소가 달라져야할 때를 정하여, 최적화를 통해 보다 시각적으로 편안한 정보를 제공할 수 있는 기반을 갖추게 된다.

 

---

mediaquery를 기존에 진행했던 2.html에 적용하기 전과 후는 다음과 같다.

  screen width가 800이하(좌) / screen width가 800초과(우)