[REACT] 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) {
/* 모바일 세로 */
}

 

반드시 정해진 크기는 아니며, 많이 사용하는 해상도를 기준으로 구분한 반응형 레이아웃으므로 반응형 레이아웃 특성에 맞춰 해상도 구분을 임의로 해서 레이아웃이 최적으로 보일 수 있도록 맞출 수 있습니다.