CSS 반응형 레이아웃 너비를 나누는 기준 정하기
반응형 웹이 웹 레이아웃을 만드는 기준이 되면서 반응형 레이아웃을 표시하기 위한 디바이스를 구분하는 여러가지 방법들이 사용되고 있습니다.
대표적으로 CSS 미디어쿼리를 사용하는 방법이 있고, 자바스크립트를 사용하기도 합니다.
어떤 것을 사용하더라도 반응형 레이아웃을 디바이스에 따라 구분하는 기준은 가로 너비입니다.
가로 너비 값에 따라 디바이스를 인식하고, 레이아웃을 거기에 맞춰 변경하는 것이 CSS 반응형 레이아웃의 기본 개념입니다.
가로 너비를 기준으로 하는 것은 반응형 레이아웃에서 공통이지만, 디바이스 종류별 너비 값 기준은 제각각입니다.
별도로 정해진 표준이라는 것이 없기 때문에 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값을 정하기도 합니다.
영어로는 나누는 기준 해상도 위치를 중단점(Break point) 이라고 합니다. 중단점, 또는 기준점을 나눌 때 대표적으로 디바이스 별로 많이 사용되는 가로 해상도는 다음과 같습니다.
이 해상도들 중 어떤 가로 너비를 디바이스 별 중단점으로 사용하는지가 반응형 웹 레이아웃을 만드는 기준이 됩니다.
1. 최소 반응형 레이아웃
가장 많이 사용하는 대중적이고 간결한 기준입니다. 768px 미만은 모바일 기기, 768px ~ 1024px 사이는 타블렛, 1024px 이상은 데스크탑 기기로 구분을 합니다.
대부분 디바이스에 잘 맞고, 반응형 레이아웃을 위한 CSS 작성도 간결하기 때문에 특별한 레이아웃이 아니면 이 기준으로 미디어 쿼리를 작성하면 됩니다.
미디어 쿼리는 다음과 같이 작성합니다.
/* 데스크탑 */
@media screen and (max-width:1023px) {
/* 타블렛 */
}
@media screen and (max-width:767px) {
/* 모바일 */
}
미디어쿼리를 작성할 때 자주 혼동하는 경우가 768px를 기준으로 나누먄 768px를 어디에 포함시켜야 하는지 입니다. 모바일은 767px까지(포함), 타블렛은 768px(포함) 부터 1023px(포함)까지가 됩니다. 포함되는 경계선의 픽셀 값이 포함되는 위치를 정확히 알고 사용해야 합니다.
2. 가로모드 디바이스 지원 반응형 레이아웃
모바일 기기와 타블렛 기기의 가로모드 화면을 별도로 구분해 디바이스 사용환경을 최대한 고려한 반응형 레이아웃입니다.
다양한 기가 환경을 고려해서 최적의 화면을 보여줘야 하거나, 그리드 형태로 많은 컨텐츠를 표시하는 반응형 레이아웃인 경우 다음과 같이 구분합니다.
미디어 쿼리는 다음과 같이 작성합니다.
/* 빅데스크탑 */
@media screen and (max-width:1799px) {
/* 데스크탑 */
}
@media screen and (max-width:1199px) {
/* 타블렛 가로 */
}
@media screen and (max-width:899px) {
/* 모바일 가로, 타블렛 세로 */
}
@media screen and (max-width:599px) {
/* 모바일 세로 */
}
반드시 정해진 크기는 아니며, 많이 사용하는 해상도를 기준으로 구분한 반응형 레이아웃으므로 반응형 레이아웃 특성에 맞춰 해상도 구분을 임의로 해서 레이아웃이 최적으로 보일 수 있도록 맞출 수 있습니다.
3. 부트스트랩 반응형 레이아웃
가장 많은 사용자를 가진 웹 UI 프레임워크인 부트스트랩은 4개의 중단점으로 구분하며, 디바이스별 구분 보다는 작은(small), 중간(medium), 큰(large), 아주 큰(extra large) 화면 크기로 구분을 해서 반응형 화면을 구분합니다.
부트스크랩이 구분을 하는 기준점별 디바이스 기준은 다음과 같습니다.
| 크기 | 키워드 | 기준점 해상도 | 디바이스 |
| 아주 작은(Extra small) | xs | 576px 미만 | 스마트폰 세로 |
| 작은(Small) | sm | 576px 이상 | 스마트폰 가로 |
| 중간(Medium) | md | 768px 이상 | 타블렛 |
| 큰(Large) | lg | 992px 이상 | 데스크탑 |
| 아주 큰(Extra large) | xl | 1200px 이상 | 큰 데스크탑 |
미디어 쿼리는 다음과 같이 작성합니다.
/* 스마트폰 세로 */
@media screen and (min-width:576px) {
/* 스마트폰 가로 */
}
@media screen and (min-width:768px) {
/* 타블렛 */
}
@media screen and (min-width:992px) {
/* 데스크탑 */
}
@media screen and (min-width:1200px) {
/* 큰 데스크탑 */
}
부트스크랩의 기본 미디어 쿼리 해상도 구분점 방향이 최소 크기를 기준으로 해서 일반적으로 사용하는 방법과 반대 방향이기 때문에 다음과 같은 방법을 권장합니다. 소수점이 있어서 조금 이상해 보일 수 있지만, 웹 브라우저에 따라서는 가로 너비가 소수점으로 표시되는 경우도 있기 때문에 이렇게 표시를 할 수 있다고 알아두는 것이 있습니다.
/* 큰 데스크탑 */
@media screen and (max-width:575.98px) {
/* 스마트폰 세로 */
}
@media screen and (max-width:767.98px) {
/* 스마트폰 가로 */
}
@media screen and (max-width:991.98px) {
/* 타블렛 */
}
@media screen and (max-width:1199.98px) {
/* 데스크탑 */
}
반응형 레이아웃을 나누는 방식은 여러가지고 있으며, 나누는 기준도 각각의 특성에 따라 다르게 때문에 제작하는 반응형 레이아웃에 따라 잘 맞는 것을 사용하면 됩니다.
정해진 표준이 있는 것이 아니므로, 단순한 레이아웃에는 가장 단순한 최소 반응형 레이아웃을, 다양한 모바일 디바이스 지원이 중요하면 디바이스 가로 모드를 고려한 레이아웃을, 대중적으로 많이 사용하는 방식을 원하면 부트스트랩 방식을 사용하는 것을 추천합니다.