Learn @media, Responsive Design

Intro

@media와 Responsive Design은 모바일 기기의 등장으로 인해 필요성이 대두된 웹 디자인 기술입니다.

Responsive Design?

Responsive Design은 모바일 기기에서 웹 사이트를 볼 때 화면 크기에 맞게 웹 페이지의 레이아웃, 디자인 및 콘텐츠를 자동으로 조정하는 기술입니다. 이를 통해 모바일 기기에서도 웹 페이지를 쉽게 볼 수 있도록 합니다.

@media?

@media는 CSS의 기능 중 하나로, 특정 미디어 유형에 대해 스타일을 지정할 수 있습니다. 즉, 화면의 크기나 해상도 등과 같은 미디어 유형을 기준으로 스타일을 지정할 수 있습니다. 이를 활용하여 Responsive Design을 구현할 수 있습니다.

Example

브라우저가 웹 페이지를 로드할 때 @media를 사용하여 미디어 유형을 확인하고, 해당 미디어 유형에 따라 다른 스타일 시트를 적용할 수 있습니다. 데스크톱 브라우저에서는 더 넓은 화면을 활용할 수 있도록 대형 이미지와 넓은 레이아웃을 사용할 수 있고, 모바일 브라우저에서는 화면이 작아지기 때문에 작은 이미지와 좁은 레이아웃을 사용할 수 있습니다.

/* 데스크톱 뷰에 대한 스타일 시트 */
@media only screen and (min-width: 768px) {
   body {
       font-size: 18px;
   }
}

/* 모바일 뷰에 대한 스타일 시트 */
@media only screen and (max-width: 767px) {
   body {
       font-size: 14px;
   }
}

위 코드는 미디어 쿼리를 사용하여 데스크톱 화면과 모바일 화면에서 각각 다른 폰트 크기를 적용하는 예시입니다. 데스크톱 화면에서는 폰트 크기를 18px로, 모바일 화면에서는 폰트 크기를 14px로 설정합니다.

이와 같은 방식으로 Responsive Design을 구현하면, 모바일 기기에서도 적절한 레이아웃과 스타일을 적용하여 보다 편리하게 웹 페이지를 이용할 수 있습니다.