[ CSS 응용 ] CSS Media Query를 활용한 반응형 디자인 가이드

 

반응형 웹 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다.

사용자들은 다양한 기기와 화면 크기에서 웹 페이지를 열람하므로,

모든 장치에서 최적화된 사용자 경험을 제공해야 합니다.

이를 위해 CSS Media Query를 활용하여 반응형 웹 디자인을 구현할 수 있습니다.

 

 

 

 

CSS Media Query란

---

CSS Media Query 는 미디어 타입과 특정 조건에 따라 CSS 스타일을 적용하는 기능입니다. 

미디어 타입은 화면, 프린터, 휴대폰 등 다양한 장치를 지정할 수 있으며,

조건은 화면 너비, 해상도, 방향 등을 포함할 수 있습니다.

 

미디어 유형

all	모든 장치에 적합
print	인쇄 용도, 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서
screen	컴퓨터 스크린을 위한 용도, 주로 화면이 대상
speech	음성 합성장치 대상

※ Media Queries3에서 사용하던 다른 유형은 Media Queries4에서 제거가 되어 사용이 안되는게 있습니다.

 

 

 

CSS Media Query 문법과 사용법

---

CSS Media Query를 사용하기 위해서는 기본적인 문법과 사용법을 알아야 합니다.

먼저, @media 규칙을 사용하여 Media Query를 정의합니다.

 

@media 미디어타입 and (조건) {
	CSS 스타일문
}

 

미디어 타입은 위에 몇가지 유형에서 다룬 내용들을 사용할 수 있습니다.

예를 들어, 다음과 같은 화면 너비에 따른

스타일을 적용하는 Media Query를 작성할 수 있습니다.

 

@media screen and (max-width:768px) {
	color: blue;
}

 

위 예제는 화면 너비가 768px 이하일 때에만

문자에 파랑색상의 스타일을 적용합니다.

 

 

 

주요 미디어 쿼리 예제와 활용 방법

---

CSS Media Query 를 활용한 반응형 웹 디자인에는 다양한 예제와 활용 방법이 있습니다.

여기에서는 몇가지 주요한 미디어 쿼리 예제를 소개하고,

각각의 활용 방법에 대해 알아보겠습니다.

 

 

1. 화면 크기(넓이)에 따른 스타일 변경

.box { 
    width: 200px; 
    height: 200px; 
    background: blue; 
}

@media screen and (max-width: 600px) {
    .box {
        background: yellow;
    }
}

 

위 예제는 "box"라는 클래스를 가진 객체에

기본적으로 상하좌우 크기 200px 짜리 정사각형이고,

배경색상이 blue로 적용되어 있습니다.

그리고 화면 너비가 600px 이하일 때에는

해당 "box"라는 객체의 배경색상을 yellow로 변경 적용하게 됩니다.

 

즉, 화면 크기 600px 초과 에는 파란색 정사각형, 

600px 이하 에는 노란색 정사각형이 나타나게 됩니다.

 

 

 

2. 해상도에 따른 이미지 변경

.box {
    background: url(/images/small_img.jpg);
}

@media screen and (min-resolution: 300dpi) {
    .box {
        background: url(/images/big_img.jpg);
    }
}

 

위 예제는 해상도가 300dpi 이상일 때에만 스타일을 적용합니다.

고해상도 디스플레이를 지원하는 기기에서는

고품질의 이미지를 사용할 수 있도록 스타일을 변경할 수 있습니다.

 

 

 

 

반응형 웹 디자인의 SEO 최적화

---

반응형 웹 디자인을 구현하면 구글 검색 엔진 최적화(SEO)에도 긍정적인 영향을 줄 수 있습니다.

구글은 모바일 친화적인 웹 페이지를 선호하며, 

모바일과 데스크톱의 별도 URL을 가지는 것보다는 반응형 웹 디자인 페이지를 권장합니다.

즉, 동일한 URL을 통해 어떠한 기기로 접근하든 반응형 디자인을 통해 최적화하여 제공한다면

구글의 검색 결과에서 더욱 높은 순위를 얻을 수 있을것으로 판단됩니다.

 

 

사실, 웹 페이지를 반응형을 만드는 방법은 CSS Media Query뿐 아니라

상황에 따라서는 다른 방법도 적절히 사용을 해야합니다. (html, jquery, javascript 등)

 

 

CSS Media Query를 이용해 현장에서도 많은 부분을 해결하고 있는 만큼

이부분에 대한 공부를 조금 더 하시고, 

컨텐츠의 단위 등을 적절히 사용 할 줄 안다면

어느정도의 페이지는 쉽게 반응형으로 제작이 가능하다고 생각합니다. 

 

[ CSS 입문 ] width, height 속성 및 길이 단위