반응형 웹은 한 동안 이슈가 되었던 기술입니다. 물론 현재에도 많이 쓰고 있습니다.
흔히들 알고 있는 워드프레스가 이 반응형 웹으로 되어 있습니다.

반응형 웹의 특징은 태블릿으로 들어오든 스마트폰으로 들어오든 아니면 PC이던지 간에 항상 최적의 구성을 보여준다는 것입니다.
물론 모바일용 홈페이지가 매우 많습니다. 그렇지만, 일반적으로 모바일용은 m 폴더를 만들어서 새롭게 구성합니다.

하지만, 반응형 웹은 같은 페이지인데 접속한 디바이스의 해상도에 따라 다르게 보이는 것입니다.

바로 얼마 전에 만든 제 개인홈페이지가 http://zooo.kr 입니다. 여기에 아주 간단하게 반응형 웹을 썼습니다.

그럼 이 기술의 기본 원리를 설명하겠습니다. 원리를 이해하고 나면 무척 쉽다는 것을 아시게 될 것입니다.

사실 이 부분이 핵심입니다.
... link rel="stylesheet" type="text/css" media="(min-width: 1090px) and (max-width: 6000px)" href="/css/main.css"
.....link rel="stylesheet" type="text/css" media="(min-width: 100px) and (max-width: 1089px)" href="/css/main_small.css" ......     (시작태그 및 마침태그를 ... 로 대치하였습니다.)

해상도가 1090 ~ 6000 픽셀 사이이면 main.css 를 불러오고
해상도가 100  ~ 1089 픽셀 사이이면 main_small.css 를 불러오도록 했습니다.
저는 빨리 만들려고 간단히 했지만, 자신이 원하는 대로 다양한 구성을 할 수 있겠죠.

그리고 해당 CSS파일에서 디자인을 개별 적용하면 됩니다. DATA는 똑같은 것을 쓰고 있지만, 이 css 파일의 영향으로 해상도에 따른 디자인이 바뀌게 되는 것입니다.

물론, 이 외에도 약간의 코딩이 필요하긴 하지만, 핵심은 이 내용입니다.
웹디자이너 또는 웹퍼블리셔라면 위 코드만 보아도 구동원리를 쉽게 이해할 수 있을 것입니다.

재빠르게 새로운 기술이 나오고 있는데요. 빠른 대처를 하는 것이 기술에 뒤쳐지지 않는 방법인 것 같습니다.

반응형 웹에 대한 경험이 쌓이면 워드프레스 테마도 만들어보시기 바랍니다. 많은 기업에서 이 테마를 만들어서 수익을 내고 있습니다. 물론, 현재는 해외 기업이 주로 그렇게 하고 있구요.
이러한 시장이 세계적인 시장임을 감안해보면, 충분히 이점이 있는 듯 합니다. 마치 앱수익을 위해서도 글로벌 앱이 필요하 듯 말입니다.

프로그래머라면 자신의 기술을 남(?)을 위해서만 쓰지 말고, 우리 자신을 위해서도 사용해보시길 권해드립니다.