💛[부스트코스_웹 UI 개발] 8. 미디어쿼리

미디어쿼리 소개

미디어쿼리는 반응형 웹 사이트를 제작하기 위해서 반드시 필요한 내용

Media Queires
각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는것

여기서의 미디어 매체 : 모니터와 같은 스크린 매체, 프린트 매체, 스크린 리더기 등

즉, 동일한 웹페이지를 스크린이나 프린터 등 다양한 환경의 사용자들에게 각 최적화된 경험을 제공할 수 있도록 다른 스타일 시트를 적용할 수 있게 만드는것이 미디어쿼리의 목적

css3에서 처음 소개됨

css2에 미디어 타입이라는 기술이 있었음.
미디어 타입은 결국 미디어 쿼리와 같은 목적으로 만들어진 기술.
미디어 타입은 몇가지 미디어 타입을 정의하고 해당하는 미디어 매체에 스타일 시트를 적용할 수 있도록 하는 내용

미디어 쿼리는 미디어 타입을 개선하고 확장해서 만들어진것이므로 선언하는 방식이 같다
미디어 타입은 이론적으로는 휼륭했으나, 하나의 미디어타입에서 광범위하게 적용된다는 문제가 존재
ex) handheld 타입의 경우 수많은 모바일, 태블릿 기기가 여기에 해당되기 때문에 하나의 스타일로 모든 소형기기를 대응해야함.
즉 1)디테일한 구분을 할 수 없었다는 문제점
또한 당시에는 웹 환경을 제대로 지원하는 미디어 매체가 데스크톱, 노트북정도 밖에 없었기 떄문에 현실적으로 적용될 수 없었다
2)즉 미디어 타입을 제대로 지원하는 기기가 없었다

현재 웹은 급격하게 발전했고, 웹을 지원하는 기기들이 기하급수적으로 늘어남으로써 대응해야 하는 미디어의 폭이 상당히 늘어남
따라서 미디어 쿼리가 등장
미디어 쿼리로 인해서 이전에 정적이고 고정 레이아웃 웹 사이트에서 동적으로 반응하는 반응형 웹 사이트로 패러다임이 새롭게 변화하였다

---

미디어 타입 & 미디어 특성

@media mediaqueries { /* style rules  */ }

@ : at이라고 부름
@media이렇게 시작되면 지금부터 미디어 쿼리를 선언한다는 뜻
그 뒤에 미디어쿼리문이 나온다
미디어 쿼리문이 끝나면 {}를 이용해서 스타일 규칙을 작성하면 끝

미디어 쿼리문은 참/거짓으로 논리적으로 평가가됨
쿼리문이 참이면 뒤에 나오는 스타일 규칙들이 적용이됨
거짓이면 스타일 규칙들이 다 무시됨

미디어쿼리문은 크게 2가지로 이루어짐
1. 미디어 타입 2. 미디어 특성

1. 미디어 매체인 스크린, 프린터, tv등 여러 타입
2. 미디어 쿼리에서 새롭게 확장된 부분
   미디어 매체를 조금 더 세분화할수있도록 여러 미디어 특성들이 정의가 되어있다.

미디어 쿼리의 다음 버전인 미디어 쿼리 level4가 CR단계
그래서 현재 미디어 특성 중 디바이스 관련한 특성들이 폐기예정

알아야할 미디어 타입
all, print, screen

• screen이 거의 전부
  화면을 출력하는 디스플레이가 있는 기기들이 전부다 스크린에 해당
• print 타입 : 인쇄할때는 가독성떄문에 스크린보다 좀 더 큰 폰트 사용, 잉크문제로 배경색상 없애는 등의 용도로 사용됨
• all 타입 : 모든 기기에 적용. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용x

알아야할 미디어 특성
width, orientation

• width: 브라우저의 가로. 뷰포트의 가로
• orientation : 미디어가 세로로 길에 나와있는지 가로로되어있는지 구분하는 특성
  미디어 쿼리에서는 뷰포트에 width값과 height값을 비교해서 height값이 width값보다 크면 세로모드
  height값이 width값보다 작으면 가로모드로 대응
  실제 반응형 사이트들이 미디어쿼리의 width특성 하나로 대부분 제작된 경우 많음
  기타 다른 특성들은 사용하지 않는다

Media Queries

Media Queries Level 4

---

Syntax - 1

S* : 공백에 관련된 표시. 없다고 보는게 이해쉬움
[]: 안에 내용이 있을수도 있고 없을수도 있고. 생략이 가능하다
| : 파이프라인 기호. a|b : a가 나올수도 있고 b가 나올수도 있다. 둘중에 하나를 선택해야함
[]* : 앞의 내용이 0번나오거나, 1번 나오거나, 그 이상 계속 연속적으로 나올 수 있다
[]? : 앞의 내용이 0번 나오거나 1번만 나와야한다
'': 따옴표 안의 내용이 구문에 실제로 그대로 들어가야한다.
media_type : 미디어 타입이 들어가는 부분. all/screen/print
media_feature: 미디어 특성이 들어가는 부분. width/orientation

media_query_list
: S* [media_query [ ',' S* media_query ]* ]?
;

: 미디어 쿼리가 연속적으로 나올 수 있다.
미디어 쿼리는 하나의 미디어쿼리문만 들어가는게 아니라 여러개의 미디어 쿼리가 이루어진 미디어 쿼리 리스트의 형태도 가능

 media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;

|를 중심으로 윗부분이나 아랫분이 들어갈 수 있다. 둘중 한가지 형태로 작성
뒷부분 : 미디어타입 없이 표현식만으로도 미디어쿼리 작성가능
only와 not키워드는 미디어타입 앞에만 붙지 표현식 앞에는 붙을 수 없다.

expression
: '(' S* media_feature S* [ ':' S* expr ]? ')' S*
;

무조건 (로 시작해야함
()안에 표현식 작성
표현식은
media_feature : 특성 이름
expr : 평가될 값
두가지로 이루어짐
둘 사이에 :로 연결해야함
표현식은 특성, 이름만으로도 존재할 수 있고 평가될 값을 쓰려면 :를 이용

정리

1. 미디어쿼리는 여러개의 미디어쿼리로 이루어진 리스트로 작성할 수 있다.
2. 미디어쿼리는 미디어타입 또는 미디어표현식이 단독으로 작성할 수 있다
3. 미디어표현식은 특성이름과 값으로 이루어짐. 표현식은 값 없이 특성이름만으로도 작성가능.

---

Syntax-2

@media screen { ... }

: 미디어 타입이 screen이면 적용된다.
screen이면 미디어쿼리가 참으로 평가되면서 스타일규칙이 적용

@media screen and (min-width: 768px) { ... }

: 미디어 타입이 screen이고 width가 768px 이상이면 적용됨. 두 개 중 하나라도 만족하지 않으면 거짓

표현식이 붙은 형태

• 특성에 붙일 수 있는 프리픽스 : min/max
  최소, 최대구간을 지정해줄수 있다. 현재 값까지 포함
  프리픽스는 특성값으로 길이처럼 숫자의 형태로 들어가는 특성에는 모두 사용가능
  프리픽스가 붙지 못하는 특성 : orientation, grid, scan
  이 3가지 특성은 값으로 특정 키워드가 들어가기 때문

@media (min-width: 768px) and (max-width: 1024px) { ... }

: and는 연결된 모든 표현식이 참이면 적용됨.(and 키워드는 연결된 부분이 모두 참이어야 적용)

미디어타입없이 바로 표현식이 나온 형태
미디어타입이 명시되지 않으면 all로 해석

@media (color-index)

: 미디어 장치가 color-index를 지원하면 적용
특성이름만 나온 형태

@media screen and (min-width: 768px), screen and (orientation: portrait), ...

: 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용( and 키워드와 반대)
,를 이용해서 다른 미디어 쿼리도 붙일 수 있다

@media not screen and (min-width: 768px)

: not 키워드는 하나의 media_query 전체를 부정
: (not screen) and (min-width: 768px) 잘못된 해석!
: not (screen and (min-width: 768px)) 올바른 해석!

@media not screen and (min-width: 768px), print

첫 번째 미디어 쿼리에만 not 키워드가 적용, 두 번째 미디어 쿼리(print)에는 영향이 없음

only키워드는 예전에 미디어쿼리를 지원하지 못하는 브라우저들 때문에 있는 하휘호환성용 키워드기 때문에 지금은 only키워드를 써도 아무런 변화 없음
not키워드는 가장 마지막에 해석이 된다

미디어쿼리 선언방식

@media screen and (color)

: CSS 파일 내부에 또는 <style> 태그 내부에 사용가능. 대부분의 경우 이렇게 사용

css파일안에 선언하거나 html내부의 style태그 안쪽에 선언
대부분 이런방식으로 미디어쿼리를 선언
css파일안에 넣는 경우가 대부분

<link rel="stylesheet" media="screen and (color)" href="example.css">

: <link> 태그의 media 속성에 미디어 쿼리를 선언. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용.

스타일시트파일을 연결하는 link태그에 미디어속성 안에 미디어쿼리를 집어넣음.
미디어쿼리가 참이면 css가 적용. 거짓으로 평가된다 하더라도 다운을 받는다.

@import url(example.css) screen and (color);

: CSS 파일 내부에 또는 <style> 태그 내부에 사용.
@import문 뒤에 미디어 쿼리를 선언

css파일을 import시키는 기능. 잘 사용되지 않음
import뒤에 css파일 경로 적어주고 미디어쿼리문 적음
참이면 css를 적용하겠다

---

실습

1. 디스플레이 크기에 따른 body태그의 background-color 변경
   디스플레이 크기 = 뷰포트 크기
   width특성 사용

• 보통 768px 이하에서는 모바일 많이 대응
• 768px과 1024px사이에서는 태블릿
• 그 이상은 데스크톱

브라우저-우클릭-검사-toggle device toolbar
: 뷰포트를 임의로 설정할 수 있다
브라우저의 가상환경 기능 이용해서 확인가능
more option의 show media quries : 미디어쿼리에 해당하는 범위가 UI로 표현됨

@media screen and (max-width: 767px) {
	body { background-color: gold; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media screen and (min-width: 1025px) {
	body { background-color: lightpink; }
}
  

미디어 쿼리는 쿼리표현식을 컴퓨터가 평가해야하는것이기 때문에 없는게 성능적으로 아주 조금이라도 더 유리
현재 3개의 조건을 만족시키기 위해서 미디어쿼리 3개를 작성했는데 하나는 작성 안해도 됨
기본적으로 body태그 안에 background-color를 3개중 하나로 정의해놓으면 나머지 두개만 미디어쿼리를 이용해서 색상구분해주면 된다
용어 : mobile first / desktop first

/* desktop first*/
body { background-color: lightpink; }
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media screen and (max-width: 767px) {
	body { background-color: gold; }
}

2. 페이지 인쇄하는 경우의 스타일 추가
   print타입 이용
   앵커요소의 url출력
   앵커요소의 밑줄 제거

ctrl+p : 인쇄했을때 형태 미리 볼 수 있음

@media print {
	a { text-decoration: none; }
	a:after { display: inline; content: '(' attr(href) ')'; }
}

참고할만한 링크

https://www.w3.org/TR/css3-mediaqueries/
css3 미디어 쿼리

https://www.w3.org/TR/mediaqueries-4/
미디어 쿼리 레벨4 명세 주소
배운거랑 차이있음
ex) min, max 프리픽스 대신 부등호 사용

https://mediaqueri.es/
미디어쿼리를 이용해서 작성된 반응형 사이트들을 모아놓은곳

---

viewport의 이해

스마트폰을 사용하여 웹을 이용하는 사용자의 빈도가 급격히 높아지면 모바일 웹 제작에 대한 이해가 중요해짐

뷰포트는 모바일 웹 사이트를 제작하기 위해 반드시 이해하고 있어야 하는 개념.

스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에 모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수 있었다.

그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작.
(기기마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 대부분 980px)

여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈(device-width/height)와 브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이가 발생.

기본 뷰포트의 크기가 980px이기 때문에 width가 980px 정도인 웹 페이지를 모바일 브라우저로 보게 되면 가로 스크롤 없이 딱 화면에 맞춰 나온다. 그렇게 되면 스크롤 하지 않아도 내용이 다 보여지는 장점이 있지만 글자나 그림들이 그 폭에 맞춰서 작아지기 때문에 가독성이 매우 떨어짐.

그래서 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입해서 뷰포트의 크기와 스케일을 조정할 수 있게 했음.

뷰포트 설정

뷰포트를 설정하는 태그는 <meta> 태그로 <head> 태그에 위치해야 한다.

name 속성에 "viewport"라고 선언하며 content 속성에 뷰포트를 설정하는 내용이 들어감.

<meta name="viewport" content=" 뷰포트의 설정 값" >

content 설정

• width(height) : 뷰포트의 가로(세로) 크기를 지정. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용.(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정한다는 의미.)
• initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정.(소수값)
• user-scalable : 사용자의 확대/축소 기능을 설정.

대부분의 모바일 웹 사이트의 뷰포트 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">