미디어 쿼리

Flatiron School에서 시간을 보내면서 저는 Frontend 디자인에 매우 관심을 갖게 되었습니다. 내가 완료한 각 프로젝트에서 사용자를 위해 미학적으로 만족스러운 브라우저 경험을 더 잘 디자인하려고 노력했습니다. 내가 많은 관심을 기울이지 않은 영역 중 하나는 내 응용 프로그램의 응답성입니다. 화면을 작게 만들거나 휴대폰에서 애플리케이션을 보면 모든 것이 뒤죽박죽이 됩니다. 이로 인해 응용 프로그램이 보고 있는 다양한 크기의 화면에 반응하도록 만드는 방법에 대해 생각하게 되었습니다. Google에서 몇 차례 검색하고 조사한 결과 이 ​​문제를 해결하는 가장 좋은 방법은 CSS 파일에서 미디어 쿼리를 사용하는 것임을 알았습니다.

미디어 쿼리는 반응형 웹 디자인의 필수 요소입니다. 사용자 뷰포트의 크기에 따라 애플리케이션의 레이아웃을 변경할 수 있습니다. 간단한 예는 휴대 전화에서 보는 경우 탐색 모음이 드롭다운 메뉴로 축소되지만 뷰포트가 더 큰 경우 화면 상단을 따라 각 탐색 링크가 표시되는 전체 탐색 모음이 있는 방법입니다. 이와 같은 것들은 앱을 방문하는 동안 사용자 경험을 훨씬 더 좋게 만들 수 있습니다.

미디어 쿼리는 복잡해질 수 있지만 단순한 미디어 쿼리는 상대적으로 읽고 이해하기 쉽습니다. 간단한 미디어 쿼리를 살펴보고 미디어 쿼리가 수행하는 기본 아이디어와 이를 직접 사용할 수 있는 방법을 이해하는 데 도움이 되기를 바랍니다.

미디어 쿼리를 사용하기 위한 구문은 @media not/only _mediatype_ and (_expressions_) 입니다.

@media는 당신이 작성하고 있는 것이 미디어 쿼리임을 CSS에 표현하고 있습니다.

not/only는 뒤에 오는 미디어 유형을 포함하지 않을지 또는 뒤에 오는 미디어 유형만 포함할지 여부를 지정합니다.

Mediatype의 기본값은 all이지만 이 쿼리를 다른 세 가지 옵션에 사용할지 여부를 지정할 수 있습니다.

인쇄 - 프린터에 사용됨

화면 - 스마트폰, 랩탑, 태블릿, 컴퓨터 화면에 사용됨

음성 - 스크린 리더에 사용됨

표현은 표현에 쓰는 내용에 따라 디자인을 변경하려는 시기 또는 방법입니다.

미디어 쿼리의 간단한 예는 다음과 같습니다.

@media only screen and (min-width: 300px) {
       background-color: blue;
}

이 예제에서는 뷰포트 너비가 300px 이상인 경우에만 배경색을 파란색으로 설정합니다. 따라서 사용자가 앱을 보고 있는 뷰포트가 300px 미만인 경우 배경색은 원래 흰색이 됩니다. 하지만 300px보다 큰 뷰포트를 통해 이 앱을 보는 경우 배경색이 파란색이 됩니다.

이것은 매우 실용적인 예는 아니지만 미디어 쿼리를 사용하여 사용자 뷰포트의 크기에 따라 애플리케이션이 반응하도록 만들 수 있음을 보여줍니다. 이는 애플리케이션을 보다 사용자 친화적으로 만드는 데 매우 유용한 도구가 될 수 있습니다.

이 블로그가 미디어 쿼리의 기본 개념을 이해하는 데 도움이 되었기를 바라며 미디어 쿼리에 대한 지식을 연습하고 확장하여 더 역동적이고 반응이 빠른 애플리케이션을 디자인할 수 있도록 할 계획입니다.