반응형웹에 대한 미디어쿼리의 사용

처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고…
삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다.

그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다.

• mydevice
• screensiz.es

기본 설정

반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해 줘야 합니다.
meta viewport의 width를 device-width로 지정하고 initial-scale을 1로 설정을 해 줘야 합니다.

• width=device-width : 화면의 넓이를 디바이스(단말기)의 넓이로 지정
• initial-scale=1 : 기본 사이즈를 1로 지정하겠다고 선언

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

이렇게 설정하면 다양한 크기의 화면에서도 보기에 편한 텍스트 크기와 레이아웃을 유지해 줍니다.

미디어쿼리 지정

기본설정을 했으면 이번에 다양한 크기(해상도)의 디바이스에 따라 CSS가 다르게 적용될 수 있게 미디어쿼리(Media Query)를 지정해야 합니다.
Breakpoints는 부트스트랩(Bootstrap)을 참조하였으며 그에 해당하는 미디어쿼리는 아래와 같이 가로 해상도에 따라 5가지로 구분할 수 있습니다.

반응형 웹개발에 있어서 고려해야 할 점이 있는데 모바일 퍼스트 로 개발을 할 것이냐 하는 것입니다.
모바일 퍼스트 개발은 화면 구현 시 먼저 모바일 화면을 기준으로 디자인(CSS)을 하고 차츰 태블릿 화면, 데스트탑 화면으로 디자인을 구현하는 것을 말합니다.
반응형 웹개발 시 근래의 추세는 모바일 퍼스트로 개발하는 추세이긴 합니다만 상황에 따라서 데스크탑 퍼스트(사실 데스크탑 퍼스트라는 말을 잘 쓰지는 않습니다.)로 개발하는 경우도 빈번합니다.

모바일 퍼스트 개발

반응형 웹개발에 있어서 모바일 퍼스트 개발은 근래에 선호되는 방법입니다.
모바일 퍼스트로 개발할 경우는 미디어쿼리도 max-width가 아니라 min-width방식으로 지정하여 사용하고
CSS의 Override 특성을 활용하여 미디어쿼리를 작성하면 됩니다.

1. 가장 작은 디바이스 : 가로 해상도가 576px 보다 작은 모든 디바이스를 기본으로 CSS를 작성합니다.
2. 모바일 디바이스 : 가로 해상도가 576px 보다 큰 경우의 모바일 디바이스에 대한 CSS를 작성합니다.
3. 태블릿 디바이스 : 가로 해상도가 768px 보다 큰 경우의 테블릿 디바이스에 대한 CSS를 작성합니다.
4. 데스크탑 : 가로 해상도가 992px 보다 큰 경우의 데스크탑에 대한 CSS를 작성합니다.
5. 큰화면의 데스크탑 : 가로 해상도가 1200px 보다 큰 경우의 데스크탑에 대한 CSS를 작성 합니다.

// 기본 CSS를 작성합니다. (세로모드 모바일 디바이스)
// 기본으로 작성되는 CSS는 576px보다 작은 화면에서 작동 됩니다.

// 가로모드 모바일 디바이스 (가로 해상도가 576px 보다 큰 화면에 적용)
@media (min-width: 576px) { ... }

// 태블릿 디바이스 (가로 해상도가 768px 보다 큰 화면에 적용)
@media (min-width: 768px) { ... }

// 테스크탑 (가로 해상도가 992px 보다 큰 화면에 적용)
@media (min-width: 992px) { ... }

// 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)
@media (min-width: 1200px) { ... }

만약@media (min-width: 768px) { ... }까지만 작성하고
@media (min-width: 992px) { ... }와 @media (min-width: 1200px) { ... }에 대한 미디어쿼리를 작성하지 않았다면
@media (min-width: 768px) { ... }에 정의된 CSS가 테스크탑과 큰화면의 데스크탑의 크기에도 동일하게 적용이 됩니다.

데스크탑 퍼스트 개발

모바일퍼스트에 반대되는 개발 방법으로 예전에 많이 사용되었던 방식입니다.
데스크탑 화면이 중요하거나 또는 기존에 개발되어 있던 데스크탑 화면의 CSS에 모바일 화면에 대한 추가 개발을 해야 할 경우에 많이 사용합니다.
이럴경우 모바일 퍼스트로 개발하는 것과 반대로 미디어쿼리도 min-width가 아니라 max-width방식으로 지정하여 사용 합니다.

• 가장 작은 디바이스 : 가로 해상도가 576px 보다 작은 모든 디바이스를 기본으로 CSS를 작성합니다.
• 모바일 디바이스 : 가로 해상도가 576px 보다 큰 경우의 모바일 디바이스에 대한 CSS를 작성합니다.
• 태블릿 디바이스 : 가로 해상도가 768px 보다 큰 경우의 테블릿 디바이스에 대한 CSS를 작성합니다.
• 데스크탑 : 가로 해상도가 992px 보다 큰 경우의 데스크탑에 대한 CSS를 작성합니다.
• 큰화면의 데스크탑 : 가로 해상도가 1200px 보다 큰 경우의 데스크탑에 대한 CSS를 작성 합니다.

// 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)
@media (max-width: 575px) { ... }

// 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용)
@media (max-width: 767px) { ... }

// 태블릿 디바이스 (가로 해상도가 992px 보다 작은 화면에 적용)
@media (max-width: 991px) { ... }

// 테스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용)
@media (max-width: 1199px) { ... }

// 기본 CSS를 작성합니다. 
// 기본으로 작성되는 CSS는 1199px보다 큰 화면에서 작동 됩니다.

만약 @media (max-width: 767px) { ... }까지만 작성하고
@media (max-width: 575px) { ... }에 대한 미디어쿼리를 작성하지 않았다면..
@media (max-width: 767px) { ... }에 정의된 CSS가 세로모드 모바일 디바이스와 가로모드 모바일 디바이스의 크기에도 동일하게 적용이 됩니다.

해상도 범위 지정 CSS 개발

나머지는 CSS의 Override기능을 사용하지 않고 지정된 해상도를 설정하여 사용하는 방법입니다.
미디어쿼리를 가장 작은 해상도와 가장 큰 해상도의 범위를 명확히 지정하여 사용 합니다.
이럴경우 미디어쿼리는 min-width와 max-width를 동시에 지정하여 사용 합니다.

• 가장 작은 디바이스 : 가로 해상도가 576px 보다 작은 모든 디바이스를 기본으로 CSS를 작성합니다.
• 모바일 디바이스 : 가로 해상도가 576px 보다 크고 767px보다 작은 모바일 디바이스에 대한 CSS를 작성합니다.
• 태블릿 디바이스 : 가로 해상도가 768px 보다 크고 991px보다 작은 테블릿 디바이스에 대한 CSS를 작성합니다.
• 데스크탑 : 가로 해상도가 992px 보다 큰고 1199px보다 작은 데스크탑에 대한 CSS를 작성합니다.
• 큰화면의 데스크탑 : 가로 해상도가 1200px 보다 큰 경우의 데스크탑에 대한 CSS를 작성 합니다.

// 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)
@media (max-width: 575px) { ... }

// 가로모드 모바일 디바이스 (가로 해상도가 576px보다 크고 768px 보다 작은 화면에 적용)
@media (min-width: 576px) and (max-width: 767px) { ... }

// 태블릿 디바이스 (가로 해상도가 768px보다 크고 991px 보다 작은 화면에 적용)
@media (min-width: 768px) and (max-width: 991px) { ... }

// 데스크탑 (가로 해상도가 992px보다 크고 1199px 보다 작은 화면에 적용)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)
@media (min-width: 1200px) { ... }