반응형 웹 사이트를 구현하는 방법

반응형 웹은 하나의 웹 사이트에서 데스크톱, 스마트폰, 태블릿 등 다양한 디바이스로 접속할 때 디바이스 해상도에 맞는 화면을 보여주도록 하는 웹 디자인 기법 중 하나입니다. 스마트폰이나 태블릿 등이 보급되기 전의 웹 사이트들은 데스크톱 화면에 최적화되어 있어 스마트폰이나 태블릿으로 접속하면 사이트의 레이아웃이 깨지는 문제가 있었습니다. 반응형 웹은 다양한 기기에서 접속해도 최적화된 화면을 제공하기 위해 개발되었습니다.

 

미디어 쿼리

반응형 웹을 구현하기 위해서 CSS의 미디어 쿼리를 이용합니다. 미디어 쿼리는 웹페이지의 스타일을 다양한 기기와 화면 크기에 따라 조절할 수 있게 CSS에 도입된 기능입니다. 이를 통해 반응형 웹 디자인을 구현할 수 있습니다. 미디어 쿼리를 사용하면 다양한 해상도에서 스타일을 지정할 수 있습니다. 미디어 쿼리를 이용한 간단한 코드입니다.

/* 600px 이하의 화면 너비에 대한 스타일 */
@media (max-width: 600px) {
  p{font-size: 16px;}
}

/* 601px에서 900px까지의 화면 너비에 대한 스타일 */
@media (min-width: 601px) and (max-width: 900px) {
  p{font-size: 20px;}
}

/* 901px 이상의 화면 너비에 대한 스타일 */
@media (min-width: 901px) {
  p{font-size: 24px;}
}

 

600px 이하의 화면에서는 p 태그의 폰트 사이즈가 16px이 되고, 601px에서 900px까지는 폰트사이즈가 20px, 901px 이상의 화면에서는 폰트 사이즈가 24px로 설정됩니다.

 

반응형 웹의 장점

사용자 경험(UX) 향상: 반응형 웹의 장점으로는 스마트폰, 태블릿, 데스크톱 등의 다양한 디바이스에서 최적화된 UI를 그려주고, 이는 사이트를 더 직관적이고 편리하게 이용할 수 있게 만들어 좋은 사용자 경험을 제공합니다. 좋은 사용자 경험은 구글과 같은 검색 엔진에서 모바일 친화적인 사이트로 SEO(검색 엔진 최적화)에도 도움이 됩니다. 또한, 리디렉션 없이 단일 URL을 사용해 검색 엔진이 웹사이트를 쉽게 색인되어 글의 순위를 올릴 수 있습니다.