[CSS] 미디어 쿼리

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

Responsive UI - Layout - Material Design

사용자가 모바일, 태블릿, 데스크탑 등 어떤 기기로 접속하든지 개발자가 의도한대로 컨텐츠를 보여주는 방식에 대해 고민해봐야겠죠!

• 여태까지 궁금했었으나 실제로 어떤 방식으로 적용하는지는 궁금했었거든요.

• 우테코 레벨1 나만의 유튜브 강의실 미션을 통해 그 궁금증을 해결해 나가겠습니다.

• MDN 문서를 요약하면서 가볼게요!

---

자.. 가볼까요?ㅎ...ㅎ....ㅎ...ㅎ....

---

❓미디어 쿼리

단말기 유형과 어떤 특성이나 수치에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용합니다.

---

💪미디어 유형

재미없는 말들의 연속일 겁니다. 1분만 참고 읽어볼까요?

장치의 일반적인 범주를 말합니다.

not , only논리 연산자를 사용할 때를 제외하면 선택사항입니다. (아래에서 다시 배워요!)

default값은 all입니다.

유형	설명
all	모든 장치에 적합해요.
print	인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
screen	주로 화면이 대상이예요.
speech	음성 합성 장치 대상이예요.

---

💪미디어 특성

1. 사용자 에이전트 (사용자를 대표하는 프로그램, 웹 맥락에서는 브라우저겠죠?)
2. 출력 장치
3. 환경

• 위와 같은 특징을 나태냅니다.

---

💪논리 연산자

not, and, only, 쉼표(or) 같은 논리 연산자를 사용하여 복잡한 쿼리를 조합할 수 있습니다.

not, only는 반드시 미디어 유형도 지정해야 합니다.

---

📖사용법

아이고 무슨 말이야😅😅
여태까지 재미없게 읽느라 심심했죠?
그럼 이제 진짜 사용법을 알아봅시다!

1. 미디어 유형 특정하기

• 미디어 유형은 장치의 일반적인 분류예요.

• 보통 screen 이겠지만, 프린터, 오디오 기반 스크린 리더 같은 것들도 있을 수 있어요.

@media print { ... }

// 여러개도 가능
@media screen, print { ... } 

---

2. 미디어 기능 특정하기

• 미디어 기능을 특정한다라... 무슨 말인지 어렵죠?
• 예를 들면 와이드스크린 모니터에서만, 마우스를 사용하는 컴퓨터에서만, 저광도 장치에서만 이렇게 구분할 수 있어요.

// viewport가 1000px 이하인 경우
@media (max-width: 1000px) { ... }

// 사용자의 주 입력 방식이 요소 위에 hover할 수 있는 경우 
@media (hover: hover) { ... }

// 흑백이 아닌 모든 장치
@media (color) { ... }

---

3. 복잡한 미디러 쿼리 만들기

• 기본적으로 논리 연산자가 무엇인지는 아실테니 바로 예시를 살펴볼까요?

👇 and는 쉽죠?

// 30em 이상의 폭을 가진 화면 && 가로 방향인 경우
@media (min-width: 30em) and (orientation: landscape) { ... }

// 스크린 && 30em 이상의 폭을 가진 화면 && 가로 방향인 경우
@media screen and (min-width: 30em) and (orientation: landscape) { ... }

👇 쉼표는 or을 의미해요!

// 높이가 680px 이상 || 화면 방향이 세로일 경우
@media (min-height: 680px), screen and (orientation: portrait) { ... }

👇 not은 미디어 쿼리 전체의 의미를 반전!

// not은 제일 나중에 적용됩니다1
@media not all and (monochrome) { ... }

// 마치 이렇게!
@media not (all and (monochrome)) { ... }

// not은 제일 나중에 적용됩니다2
@media not screen and (color), print and (color) { ... }

// 마치 이렇게!
@media (not (screen and (color))), print and (color) { ... }

👇 only는 지원하지 않는 구형 브라우저가 스타일을 적용하지 못하도록 합니다 (신형 브라우저는 노상관~)

@media only screen and (color) { ... }

---

📈Level 4의 구문 향상

• 이젠 max- 도 싫다!

// 너무 꿀이죠!!
@media (width <= 30em) { ... } 

// 답답하다..
@media (min-width: 30em) and (max-width: 50em) { ... }

// Level4에서는 부등호를 쓰지!
@media (30em <= width <= 50em ) { ... }

• or 사용이 가능해져요. 쉼표보단 or죠

// 흑백화면인지 혹은 hover가 가능한 지
@media (not (color)) or (hover) { ... }

---

Layout - Responsive UI

미디어 쿼리로 반응형 웹을 디자인한다는 알겠어요.

하지만 어떤 기준으로 어떻게 나눠야 이게 반응형 웹이 될 수 있는 걸까요?

1. Breakpoints

궁금한 건 뭐니뭐니해도 화면이겠죠!

• 어떤 기준으로 화면을 나눠야 최적의 사용자 경험을 설계할 수 있을까요?

👆 위 그림에서는 breakpoint widths를 480, 600, 840, 960, 1280, 1440, 1600dp로 나누라고 하고 있네요!

• Material Design에서는 다음과 같이 보고 있군요!

Material Design Breakpoints

2. Grid

• Material Design의 responsive UI에서는 12 개의 열이 grid 레이아웃의 기본입니다.
• 이 그리드는 화면의 크기가 다양하게 변해도 어느정도 비쥬얼적으로 일관성을 줍니다!

---

3. Surface behaviors

• 이번에는 다루지 말죠! 필요성을 느낄 때 업로드할게요🤙

4. Patterns

• 이번에는 다루지 말죠! 필요성을 느낄 때 업로드할게요🤙

---