[HTML/CSS] 반응형 웹사이트 - 미디어쿼리

미디어쿼리란?

PC, 모바일, 태블릿 등 다양한 사이즈의 기기에 대응되는 반응형/적응형 웹사이트를 제작하기 위해 사용되는 CSS 구문

 

주의사항

미디어쿼리가 제대로 작동하지 않는 문제에 대비하여 메타 태그를 작성한다.

* 메타 태그: 해당 문서에 대한 정보를 정의 (head 내부에 작성)

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  			// viewport: 기기의 화면을 의미
            // width를 기기 화면 width로 치환
            // 비율: 1.0

 

형식

min-width, max-width로 브라우저의 가로폭을 설정한다. 설정한 가로폭이 되었을 경우 {} 내부 css 속성으로 대체한다는 의미.

/* 원본 속성 */
.medianame {
	width: 800px;
    height: 800px;
    background-color: green;
}

/* 반응형 */
@media (min-width: 320px) and (max-width: 800px) {
	.medianame {
    	width: 300px;
        height: 200px;
        background-color: yellow;	/* 상속 받지 않고자 하는 경우: none */
    }
}