[CSS] 미디어 쿼리(Media Queries) ? : #2 반응형 웹

✏️

오늘은 반응형에 필수적인 미디어 쿼리의 문법과 사용법에 대해 알아보자.

 

---

미디어 쿼리(Media Queries) ?

 

우선 미디어 쿼리란 무엇일까. 🤔

미디어 쿼리는 반응형 웹 디자인의 핵심적인 부분으로

디바이스의 유형이나 특성, 수치에 따라 화면을 다르게 표현하여 대응할 수 있도록 만들어준다.

 

과거와 달리 현재 정말 다양한 기기로 웹을 사용하기 때문에

일관된 UX를 위해서는 빼놓을 수 없다.

 

🙋🏻❓

 

미디어 쿼리에서 쿼리(Query)란 직역하면 '질의'이라는 의미로

CSS 설정을 위해 우선 조건문에 해당하는지 질의하는 것이라고 생각하면 쉽다.

 

재미있게 예를 들어보자.

디바이스의 수치에 해당하는 뷰포트의 너비에 따라

CSS 설정을 다르게 해보고 싶다면?

 

🙋🏻 :  너는 뷰포트의 너비가 얼마야?

1번 스마트 폰 조건에 만족하다면  👉🏻 🍎(너는 빨간 사과 맛 스타일을 준비했어)
2번 태블릿 조건에 만족한다면 👉🏻 🍏 (너는 초록 사과 스타일을 준비했어)

 

이런 식이다 ㅎ,,

 

 

미디어 쿼리를 적용하기 위해서는

두 가지의 방법이 있다.

 

• CSS 내부 파일 상단에 명시하거나

/* 여기는 CSS 파일 내부 !!!! */

@media screen and (max-width: @@@px) {
	/* CSS 설정 */
}

 

• CSS 외부에서 media 속성으로 명시하거나!

<link rel="stylesheet" type="text/css" href="@@@.css" media="screen and (max-width: @@@px)">

 

+)

하지만 웹 브라우저는 조건과 관계없이 모든 CSS 파일을 항상 요청하기에 

 link로 연결하는 것은 불필요한 중복 HTTP 요청을 발생시켜 성능을 저하시킬 수 있는 방법이라고 한다!

 

미디어 쿼리 문법

 

미디어 쿼리를 사용하기 위해서 따라야하는 문법은 아래와 같다.

 

only의 경우 디폴트 값으로 생략이 가능하고, 

not, and, only와 같은 논리 연산자를 사용하여 복잡한 쿼리를 조합할 수도 있다!

 

@media [only|not] 미디어 유형 [and 또는 ,] (조건문) {
	/* 실행문 */
}

 

 

CSS3 미디어 유형

 

미디어의 유형에는 대표적으로는 아래의 4가지가 자주 사용된다.

• all
• print
• screen
• speech

 

 

 

CSS3 미디어 쿼리 속성

 

미디어 쿼리 속성의 경우 max-width, min-width 와 같이 접두어를 붙여 가장 많이 사용한다.

이외에도 디바이스의 다양한 특성들로 쿼리의 조건문을 설정할 수 있다.

 

 

 

다음 포스팅에서는 미디어 쿼리의 분기점,

브레이크 포인트에 대해 간략히 알아보자!

🤔

---

 

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️

***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***