[코드캠프 8주차]@media , Responsive Design

[반응형 디자인]

반응형은 말그대로 웹 사이트가 사용자가 보여지는 화면의 크기에 따라서 반응을 하는것 처럼 UI/UX 적인 즉 디자인이 변경되는 것을 말한다.
반응형으로는 모바일/테블릿/PC 이렇게 세가지로 분류해놓고 반응형 디자인을 진행한다.
CSS 에서도 이러한 기능을 지원하는데 @media를 이용하여 몇 px 부터는 PC 아니면 테블릿 아니면 모바일 이런식으로 반응형 디자인을 디자인한다.

대중적으로는 반응형 디자인의 기준은 다음과 같다.
가장 많이 사용하는 대중적이고 간결한 기준이다. 768px 미만은 모바일 기기, 768px ~ 1024px 사이는 타블렛, 1024px 이상은 데스크탑 기기로 구분을 한다.

대부분 디바이스에 잘 맞고, 반응형 레이아웃을 위한 CSS 작성도 간결하기 때문에 특별한 레이아웃이 아니면 이 기준으로 미디어 쿼리를 작성하면 됩니다.

미디어 쿼리는 아래에 맞게 설정하면 좋습니다.

/* 데스크탑 */

@media screen and (max-width:1023px) {
/* 타블렛 */
}

@media screen and (max-width:767px) {
/* 모바일 */
}

미디어쿼리를 작성할 때 자주 혼동하는 경우가 768px를 기준으로 나누먄 768px를 어디에 포함시켜야 하는지를 많이 고민한다. 모바일은 767px까지(포함), 타블렛은 768px(포함) 부터 1023px(포함)까지가 된다. 포함되는 경계선의 픽셀 값이 포함되는 위치를 정확히 알고 사용해야 한다.