[CSS] 반응형 웹 미디어 쿼리 (Media Query)

반응형 웹은 하나의 웹사이트에서 PC, 스마트폰, 태블릿  PC등 접속하는 디스플레이 종류에 따라서 화면 크기가 자동으로 변하게 해준다.

 

미디어 쿼리(Media Query)는 접속하는 장치에 따라서 CSS 스타일을 변경한다.

PC로 접속하면 PC화면에 맞게, 스마트폰으로 접속하면 스마트폰 화면에 맞게 레이아웃을 변경한다.

웹 페이지 CSS를 모바일 화면 CSS로 변경해보자.

 

반응형 웹에서 CSS 스타일이 아닌 페이지 배율을 변경하고 싶다면 - 뷰 포트 (View Port)

---

미디어 쿼리 (Media Query)

1. CSS 파일 안에서 적용할 때

.title { // .title에 font-size를 100px로 적용
  	font-size: 100px;
}

@media (max-width: 600px) { // 600px보다 작은 화면에서는 font-size를 50px 적용 
	.title {
    		font-size: 50px;
  	}
}

@media (min-width: 1000px) { // 1000px보다 큰 화면에서는 font-size를 200px 적용 
	.title {
    		font-size: 200px;
  	}
}

2. <link> 태그에서 적용할 때

<link rel="stylesheet" media="(max-width:600px)" href="main.css" > // main.css를 600보다 작은화면에 적용

---

적용할 웹페이지에서 개발자 모드(F12)를 연다.

 

클릭

 

디스플레이 종류를 선택한 후

max-width나 min-widht에 width값(작성자 화면은 882)을 맟춰서 기입 하면된다.

---

미디어 쿼리 유형

all	모든 디바이스 대상
print	인쇄 결과물 및 인쇄 미리보기 문서
screen	스크린이 있는 디바이스
sppech	웹페이지를 읽어주는 스크린 리더

 

유형을 지정하지 않은면 디폴트값 all이 지정된다.

---

미디어 쿼리 연산자

@media (max-width: 1000px) and (max-width: 600px){ // 600px보다 크면서 1000px보다 작은 화면
	.title {
    		font-size: 50px;
   	}
}

@media (max-width: 1000px), (max-width: 600px){ // 600px보다 크거나 1000px보다 작은 화면
  	.title {
    		font-size: 50px;
  	}
}

@media only (max-width: 1000px){ // 1000px보다 작은 화면
	.title {
    		font-size: 50px;
  	}
}

@media not (max-width: 1000px){ // 1000px보다 작지 않은 화면
  	.title {
    		font-size: 50px;
  	}
}

and, 쉼표(,), only, not 연산자를 사용할 수 있다.

 

유형을 지정하지 않으면 디폴트값 only가 지정된다.

---

@media (조건문) {실행문}은

@media only all and (조건문) {실행문}와 같다.