@media part2 - by. UXKM

Publishing
CSS
CSS 중급
@media part2

요약 설명
@media는 출력 장치의 특징을 참조하여 CSS 코드를 분기 처리하는 규칙입니다.
출력 장치의 유형, 크기, 해상도 등을 조건으로 하여 하나의 HTML 소스가 여러 가지 뷰를 갖도록 구현할 수 있으며, 이를 미디어 쿼리(Media Query)라고 합니다.

미디어 쿼리는 CSS2부터 사용되었으며, CSS3에서 본격적으로 쓰이기 시작했습니다.
CSS2에서는 매체 유형(media type)만 지원했지만, CSS3에서는 매체 유형과 width, height, color 등의 표현식으로 구성된 미디어 쿼리를 사용할 수 있습니다.
반응형 웹의 핵심 기법으로, 뷰포트 해상도에 따라 CSS 코드를 분기하여 반응형 레이아웃을 구현하거나 문서를 인쇄할 때 사용됩니다.

요약 설명
@media part-2에서는 @media의 속성 중

미디어 쿼리(Media Query) 코드 템플릿

반응형 웹과 적응형 웹

컨테이너 쿼리(Container Queries)에 대한 내용을 다루고 있습니다.

미디어 쿼리(Media Query) 코드 템플릿

아래 예시들은 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿입니다.
프로젝트 환경 또는 디자인에 따라 적절하게 선택하여 사용해야 합니다.

기본적인 미디어 쿼리 사용

뷰포트의 너비가 480px이거나 그 이하일 경우에는 배경색을 darkorange로 표현합니다.
하지만 뷰포트의 너비가 그 초과일 경우에는 배경색을 lightblue로 바꿔서 표현합니다.

								body { background-color: darkorange; }
								@media screen and (min-width: 480px) {
									body { background-color: lightblue; }
								}

브라우저, 프린터 용도 분기

다음 예제를 웹 브라우저에서 실행하면 배경색을 검정색으로, 텍스트의 색상은 흰색으로 표현합니다.
하지만 웹 페이지를 프린트하게 되면 배경색을 흰색으로, 텍스트의 색상을 검정색으로 바꿔서 프린트합니다.

								@media screen {
									body { background-color: black; color: white; }
								}
								@media print {
									body { background-color: white; color: black; }
								}

Device 별 사이즈

일반적으로 사용하는 device별 미디어 쿼리 사이즈입니다.

								/* All Device */
								@media screen {
									/* 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. */
								}

								/* Mobile Device */
								@media all and (max-width:768px) {
									/*
									768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다.
									모든 해상도에서 이 코드가 실행됨.
									미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
									*/
								}

								/* Tablet Device */
								@media all and (min-width:768px) {
									/*
									사용자 해상도가 768px 이상일 때 이 코드가 실행됨.
									테블릿과 데스크톱의 공통 코드를 작성한다.
									*/
								}

								/* Tablet & Desktop Device */
								@media all and (min-width:768px) and (max-width:1024px) {
									/*
									사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨.
									아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
									*/
								}

								/* Desktop Device */
								@media all and (min-width:1025px) {
									/*
									사용자 해상도가 1025px 이상일 때 이 코드가 실행됨.
									1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
									*/
								}

Mobile First 반응형 웹

Mobile부터 시작하여 Tablet, Desktop으로 변화하는 반응형 웹의 미디어 쿼리 템플릿입니다.

								/* All Device */

								/* Custom, iPhone Retina : 320px ~ */
								@media only screen and (min-width : 320px) { … }

								/* Extra Small Devices, Phones : 480px ~ */
								@media only screen and (min-width : 480px) { … }

								/* Small Devices, Tablets : 768px ~ */
								@media only screen and (min-width : 768px) { … }

								/* Medium Devices, Desktops : 992px ~ */
								@media only screen and (min-width : 992px) { … }

								/* Large Devices, Wide Screens : 1200px ~ */
								@media only screen and (min-width : 1200px) { … }

Desktop First 반응형 웹

Desktop부터 시작하여 Tablet, Mobile으로 변화하는 반응형 웹의 미디어 쿼리 템플릿입니다.

								/* All Device */

								/* Large Devices, Wide Screens : ~ 1200px */
								@media only screen and (max-width : 1200px) { … }

								/* Medium Devices, Desktops : ~ 992px */
								@media only screen and (max-width : 992px) { … }

								/* Small Devices, Tablets : ~ 768px */
								@media only screen and (max-width : 768px) { … }

								/* Extra Small Devices, Phones : ~ 480px */
								@media only screen and (max-width : 480px) { … }

								/* Custom, iPhone Retina : ~ 320px */
								@media only screen and (max-width : 320px) { … }

iOS 계열 CSS(@media)

Apple사의 여러 기기에 상세히 대응할 수 있는 @media 템플릿입니다.

iPhone 4 and 4S (레거시 기기 지원용)

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-resolution: 2dppx) { … }

									/* Portrait */
									@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-resolution: 2dppx) and (orientation: portrait) { … }

									/* Landscape */
									@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-resolution: 2dppx) and (orientation: landscape) { … }

iPhone 5, 5S, 5C and 5SE (레거시 기기 지원용)

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (min-resolution: 2dppx) { … }

									/* Portrait */
									@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (min-resolution: 2dppx) and (orientation: portrait) { … }

									/* Landscape */
									@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (min-resolution: 2dppx) and (orientation: landscape) { … }

iPhone 6, 6S, 7 and 8 (레거시 기기 지원용)

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (min-resolution: 2dppx) { … }

									/* Portrait */
									@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (min-resolution: 2dppx) and (orientation: portrait) { … }

									/* Landscape */
									@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (min-resolution: 2dppx) and (orientation: landscape) { … }

iPhone 6+, 7+ and 8+ (레거시 기기 지원용)

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (min-resolution: 3dppx) { … }

									/* Portrait */
									@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (min-resolution: 3dppx) and (orientation: portrait) { … }

									/* Landscape */
									@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (min-resolution: 3dppx) and (orientation: landscape) { … }

iPhone X (레거시 기기 지원용)

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (min-resolution: 3dppx) { … }

									/* Portrait */
									@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (min-resolution: 3dppx) and (orientation: portrait) { … }

									/* Landscape */
									@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (min-resolution: 3dppx) and (orientation: landscape) { … }

iPad 1, 2, Mini and Air (레거시 기기 지원용)

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 1dppx) { … }

									/* Portrait */
									@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (min-resolution: 1dppx) { … }

									/* Landscape */
									@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (min-resolution: 1dppx) { … }

iPad 3, 4 and Pro 9.7"

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 2dppx) { … }

									/* Portrait */
									@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (min-resolution: 2dppx) { … }

									/* Landscape */
									@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (min-resolution: 2dppx) { … }

iPad Pro 10.5"

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 834px) and (max-device-width: 1112px)and (min-resolution: 2dppx) { … }

									/* Portrait */
									/* Declare the same value for min- and max-width to avoid colliding with desktops */
									/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
									@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (min-resolution: 2dppx) { … }

									/* Landscape */
									/* Declare the same value for min- and max-width to avoid colliding with desktops */
									/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
									@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (min-resolution: 2dppx) { … }

iPad Pro 12.9"

									/* Portrait and Landscape */
									@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (min-resolution: 2dppx) { … }

									/* Portrait */
									/* Declare the same value for min- and max-width to avoid colliding with desktops */
									/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
									@media only screen   and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (min-resolution: 2dppx) { … }

									/* Landscape */
									/* Declare the same value for min- and max-width to avoid colliding with desktops */
									/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
									@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (min-resolution: 2dppx) { … }

Apple Watch

									<style>
									@media (max-device-width: 42mm) and (min-device-width: 38mm) { … }
									</style>

반응형 웹과 적응형 웹

일반적으로 반응형 웹 디자인은 뷰포트 너비(width 프로퍼티)를 기준으로 하며, 뷰포트 너비에 따라 반응하는 범위를 스크린 경계치(screen breakpoints)라고 부릅니다.
스마트폰, 태블릿, 데스크탑에 대해 최소한의 스크린 경계치를 고려해야 합니다.

반응형 웹과 적응형 웹은 모두 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 사용자 경험을 제공하기 위한 방법입니다.

반응형 웹(Responsive Web)

반응형 웹은 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃이 자동으로 조절되는 웹 디자인 방식입니다.
하나의 템플릿으로 모든 기기에 대응할 수 있어 개발이 간편하지만, 모든 기기를 위한 CSS를 다운로드해야 하므로 로딩 시간이 길어질 수 있습니다.

미디어 쿼리를 사용해 기기 화면의 크기를 확인하고, 유연한 이미지와 그리드로 화면 크기 변화에 따라 페이지 레이아웃을 조절합니다.
하나의 템플릿만 사용하므로 개발이 간편하고 유지보수가 쉽습니다.
모든 기기를 위한 CSS를 다운로드해야 하므로 데이터 사용량이 많고 로딩 시간이 길어질 수 있습니다.
기존 데스크톱 사이트가 있다면 재구축이 필요할 수 있습니다.

적응형 웹(Adaptive Web)

적응형 웹은 서버나 클라이언트에서 접근한 기기를 감지하여 해당 기기에 최적화된 템플릿을 제공하는 웹 디자인 방식입니다.
기기별로 별도의 템플릿을 제작해야 하지만, 기기에 맞는 콘텐츠만 다운로드하므로 로딩 속도가 빠릅니다.

접근한 기기를 감지하여 해당 기기에 맞는 템플릿을 제공합니다.
기기별로 다른 템플릿을 제작해야 하므로 개발이 복잡합니다.
기존 데스크톱 사이트가 있다면 모바일용 템플릿만 추가하면 되어 재구축이 필요 없습니다.
기기에 맞는 콘텐츠만 다운로드하므로 데이터 사용량이 적고 로딩 속도가 빠릅니다.

반응형 vs 적응형

특징
반응형 웹
적응형 웹

기기 감지

미디어 쿼리로 기기 감지합니다.

서버 또는 브라우저에서 기기 감지합니다.
템플릿

하나의 템플릿으로 충분합니다.

기기마다 다른 템플릿 필요합니다.
콘텐츠 다운로드

모든 콘텐츠 다운로드 필요합니다.

기기에 맞는 콘텐츠만 다운로드 합니다.
로딩 속도

로드되는 속도가 느립니다.

로드되는 속도가 빠릅니다.
기존 사이트

기존 사이트 변경 및 재구축 필요합니다.

기존 사이트 변경 없이 구축 가능합니다.

모바일 퍼스트 디자인(Mobile First Design)

모바일 퍼스트 디자인은 웹 애플리케이션을 처음 구축할 때 모바일을 우선으로 설계하는 방식입니다.
모바일을 먼저 구축한 후, 데스크톱이나 다른 기기를 위한 반응형/적응형 웹을 추가합니다.

								/* Mobile style */

								/* Custom, iPhone Retina : 320px ~ */
								@media only screen and (min-width : 320px) { … }

								/* Extra Small Devices, Phones : 480px ~ */
								@media only screen and (min-width : 480px) { … }

								/* Small Devices, Tablets : 768px ~ */
								@media only screen and (min-width : 768px) { … }

								/* Medium Devices, Desktops : 992px ~ */
								@media only screen and (min-width : 992px) { … }

								/* Large Devices, Wide Screens : 1200px ~ */
								@media only screen and (min-width : 1200px) { … }

위 CSS 코드처럼 모바일을 기본으로 삼아 코드를 짠 후, 다른 기기에 맞는 CSS 코드를 추가하는 방식입니다.

모바일 퍼스트 디자인의 장점

모바일을 데스크톱으로 확장하는 것은 쉽지만, 데스크톱을 모바일로 축소하는 것은 어렵습니다.
모바일은 화면이 작아 핵심 콘텐츠만 제공해야 하므로, 미니멀한 디자인이 가능합니다.
모바일 기준으로 작성한 웹 페이지는 데스크톱으로 쉽게 확장할 수 있습니다.

데스크탑 퍼스트가 모바일 퍼스트에 비해 가질 수 있는 장점과 단점

장점
확실한 구버전 IE대응

익숙한 작업 순서 유지

리뉴얼 없는 모바일 대응 추가
단점
오버라이딩(속성 덮어쓰기) 발생
데스크탑 퍼스트 방식에서는 모바일 화면을 만들기 위해 CSS 속성을 다시 덮어써야 하는 경우가 많아 코드가 길어집니다.

사이드 이펙트(부작용) 문제
데스크탑의 수정사항이 모바일에 영향을 미칠 수 있어, 수정 시 모바일 화면을 함께 확인해야 합니다.

반응형 웹페이지에서 사용되는 대부분의 레이아웃의 5가지 패턴 요약

LukeW(모바일 우선주의 디자인의 창시자)가 제시한 5가지 레이아웃 패턴은 다음과 같습니다.

Mostly Fluid(유동형) : 일반적인 화면에서는 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 그대로 유지합니다. 가장 작은 화면에서는 수직으로 컬럼을 세우는 구조를 가지며, 가장 많이 사용되는 패턴입니다.
Column Drop(열 드롭) : 화면이 작아짐에 따라 부차적인 컬럼을 아래로 떨어트리는 방법을 쓰는 패턴입니다. 대부분의 컬럼폭은 화면 크기가 달라져도 변함이 별도 없다는 특징이 있습니다.
Layout Shifter(레이아웃 시프터) : 다양한 디바이스에 따라 각기 다른 레이아웃을 보여주는 패턴입니다. 복잡하고 많은 작업이 필요하지만 혁신적인 디자인을 담을 수 있다는 장점이 있습니다.
Tiny Tweaks(작은 변화) : 하나의 컬럼을 사용하는 패턴입니다. 변화의 폭이 크지 않다는 특징이 있으며, 주로 글 내용을 중시하는 블로그에서 많이 사용되는 패턴입니다.
Off Canvas(캔버스 오프) : 큰 화면에서는 모든 컬럼들을 보여주고 작은 화면에서는 하나의 메인 컬럼만 보여주며 다른 부가적인 컬럼들을 화면 밖에 숨겨놓는 패턴입니다. 숨겨진 컬럼들은 필요할 때만 접근하도록 합니다.

Mostly Fluid(유동형)

일반적인 화면에서는 유동형 그리드와 이미지를 사용하여 레이아웃을 유지하고, 작은 화면에서는 컬럼이 수직으로 쌓이는 구조입니다.
가장 많이 사용되는 패턴이며, 작은 화면과 큰 화면 사이에 하나의 중단점(breakpoint)만 있으면 됩니다.
활용 사이트
[유동형 Mostly fluid]
Column Drop(열 드롭)

화면이 작아짐에 따라 부차적인 컬럼을 아래로 떨어뜨리는 패턴입니다.
대부분의 컬럼 폭은 화면 크기가 달라져도 변하지 않으며, 화면이 좁아지면 열들이 수직으로 쌓입니다.
활용 사이트
[열 드롭 Column drop]
Layout Shifter(레이아웃 시프터)

다양한 디바이스에 따라 각기 다른 레이아웃을 보여주는 패턴입니다.
여러 개의 중단점을 두어 화면 크기에 민감하게 반응하며, 컬럼을 떨어뜨리는 대신 컨텐츠를 이동시킵니다. 복잡한 작업이 필요하지만 혁신적인 디자인을 구현할 수 있습니다.
활용 사이트
[레이아웃 시프터 Layout shifter]
Tiny Tweaks(작은 변화)

하나의 컬럼을 사용하는 패턴으로, 글꼴 크기나 이미지 크기만 조정하는 작은 변화만 이루어집니다. 변화의 폭이 크지 않으며, 주로 블로그나 단일 열 레이아웃에서 사용됩니다.
활용 사이트
[작은 변화 Tiny tweaks]
Off Canvas(캔버스 오프)

큰 화면에서는 모든 컬럼을 보여주고, 작은 화면에서는 메인 컬럼만 보여주며 부가적인 컬럼을 화면 밖에 숨겨놓는 패턴입니다.
숨겨진 컬럼은 필요할 때만 접근할 수 있으며, 네비게이션이나 메뉴 같은 요소를 작은 화면에서는 클릭 시에만 보여줍니다.
활용 사이트
- HTML5Rocks Articles
- Google Nexus
[오프 캔버스 Off canvas]

컨테이너 쿼리(Container Queries)

컨테이너 쿼리는 뷰포트 크기가 아닌 부모 컨테이너의 크기를 기준으로 스타일을 적용하는 기능입니다.
미디어 쿼리는 뷰포트 전체 크기를 기준으로 하기 때문에, 페이지의 특정 컴포넌트만 독립적으로 반응형으로 만들기 어려웠습니다.
컨테이너 쿼리를 사용하면 카드, 위젯, 사이드바 같은 개별 컴포넌트가 자신이 포함된 컨테이너의 크기에 따라 스타일을 조정할 수 있습니다.

컨테이너 쿼리는 CSS Containment Module Level 3에 정의되어 있으며, 최신 브라우저에서 지원됩니다.

컨테이너 설정

컨테이너 쿼리를 사용하려면 먼저 컨테이너로 사용할 요소에 container-type 또는 container 속성을 설정해야 합니다.

								.card-container {
									/* 컨테이너로 지정 */
									container-type: inline-size;
								}

								/* 또는 container 속기형 사용 */
								.card-container {
									container: my-container / inline-size;
								}

container-type 속성 값:

inline-size: 인라인 방향(가로) 크기를 기준으로 쿼리
block-size: 블록 방향(세로) 크기를 기준으로 쿼리
size: 인라인과 블록 방향 모두를 기준으로 쿼리
normal: 컨테이너 쿼리 사용 안 함 (기본값)

container-name을 사용하면 여러 컨테이너 중 특정 컨테이너를 지정할 수 있습니다.

								.sidebar {
									container-name: sidebar;
									container-type: inline-size;
								}

								.main-content {
									container-name: main;
									container-type: inline-size;
								}

								/* 특정 컨테이너를 지정하여 쿼리 */
								@container sidebar (min-width: 300px) {
									.widget {
										font-size: 1.2rem;
									}
								}

@container 규칙 사용

@container 규칙은 미디어 쿼리의 @media와 유사하지만, 뷰포트가 아닌 컨테이너의 크기를 기준으로 작동합니다.

								.card-container {
									container-type: inline-size;
								}

								.card {
									padding: 1rem;
									font-size: 1rem;
								}

								/* 컨테이너가 400px 이상일 때 */
								@container (min-width: 400px) {
									.card {
										padding: 2rem;
										font-size: 1.2rem;
									}
								}

								/* 컨테이너가 600px 이상일 때 */
								@container (min-width: 600px) {
									.card {
										display: grid;
										grid-template-columns: 1fr 2fr;
										gap: 2rem;
									}
								}

컨테이너 쿼리 예제

카드 컴포넌트가 컨테이너 크기에 따라 레이아웃이 변경되는 예제입니다.