미디어쿼리

미디어쿼리(Media Query)란?

 

조건에 따라서 스타일을 적용하고 싶을때 사용한다.

 

@media로 시작하는 미디어 쿼리의 기본적인 문법 구조는 아래와 같다.

/* css파일 */

@media (조건) {
  스타일
}

조건에 맞으면 스타일이 적용된다.

 

---

미디어 쿼리 타입

 

여러가지 미디어 쿼리 타입이 있지만 대체로 이 4가지만 사용된다.

 

• all : 기본값. 모든 미디어 장치에 사용 됨
• print : 프린터에 사용
• screen : 컴퓨터 스크린, 테블릿, 스마트폰 등
• speech : 페이지를 읽어주는 화면 낭독기

 

/* 일반 화면(screen)과 인쇄장치 별로 서로 다른 style을 지정하는 예 */

@media screen {
	* {
		color: red;
	}
}
@media print {
	* {
		color: blue;
	}
}

---

 

미디어 쿼리 연산자

 

• and 연산자 : 여러 미디어 특징들을 하나로 결합함 .
• , (or)연산자 : 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.
• not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.

 

---

 

미디어 쿼리 실전 예제

 

@media screen and (max-width:576px) { ... }
@media screen and (max-width:768px) { ... }
@media screen and (max-width:1200px) { ... }

 

1200px / 992px / 768px / 576px

이런 사이즈를 권장한다.

Bootstrap 라이브러리가 기본으로 권장하는 breakpoint 이다.

이것중에 어느 사이즈부터 PC, 태블릿, 모바일일지는 각자 알아서 정하자

 

---

 

참고

 

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%AC-%EB%B0%98%EC%9D%91%ED%98%95-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83