4. 모바일 웹사이트 만들기: 미디어 쿼리 활용

미디어 쿼리 소개

- 다양한 디바이스(pc, 탭, 폰,...) 에 대응되는 웹사이트 만들기 위해 사용되는 CSS 구문

 

 

미디어 쿼리 media

- 가로폭이 최소 320px, 최대 800px 일 경우 내부 .media로 대체

<style>
  .media { 
    width: 500px;
    height: 500px;
    background-color: red;
  }
  @media (min-width: 320px) and (max-width: 800px)  /* media */
       .media { 
          width: 300px;
	  height: 300px;
	  background-color: yellow;
	}
   }
</style>

 

 

---

미디어쿼리 사용 시 주의사항

viewport

- 다양한 기기의 화면 상 표시되는 영역

- 미디어 쿼리 제대로 작동X ➔ viewport로 디바이스 너비/배율 설정

<meta name="viewport" content=“width=device-width, initial-scale=1.0”>

 

 

CSS 속성 상속

- none : 상속 원하지 않은 경우

<style>
 ...
 
  @media (min-width: 320px) and (max-width: 800px) {
       .media { 
          width: 300px;
	  height: 300px;
	  background-color: none;  /* 상속X */
	}
   }
</style>