웹디자인의 이슈 중 하나가 반응형 디자인입니다.
반응형 디자인이라는 건 해상도가 변해도 다른 작업 없이 레이아웃이 구성되도록 하는 것을 말합니다.
(유동 디자인, 능동형 디자인 등으로 부릅니다.)
해상도에 따라 다른 화면이 아닌 일정한 화면을 보여주는 방식으로 크로스 브라우징을 해결하려고 하는 생각은 이전부터 있었습니다.
그런데 이 방법의 가장 큰 문제는 한가지 스타일만 가지고는 이 문제를 해결할 수 없다는 점입니다.
그래서 생겨난 것이 '@media'인데....
미리 정의한 타입들만 가지고는 한계가 있다는 문제점이 있습니다.
(참고 : sixmen - Media Query )
그래서 CSS3에서는 미디어 쿼리라는 것이 생겼습니다.
1. 문제의 시작
특정 범위의 해상도에서는 한가지 스타일만 가지고 있어도 크게 문제가 없습니다.
문제는 극단적으로 해상도 차이가 나는 경우입니다.
다행히 제가 사용한 디자인의 경우 이미 부트스트랩을 이용해 많은 부분이 반응형 디자인이 적용되어 있습니다.
(참고 : [Asp.net MVC 4] 빈 템플릿에 부트스트랩 3(bootstrap 3) 적용하기)
로그인과 메인매뉴가 숨겨진다거나 메인 타이틀의 크기가 줄어든다거나 하는 것들이 적용되어 있죠.
하지만 큰 여백은 화면이 작아지니 너무 큰 공간을 차지하고 있습니다.
2. 반응형 디자인 만들기
결국 해상도에 따라 다른 스타일을 적용해야 한다는 것입니다.
이럴 때 사용하는 것이 '미디어 쿼리(media query)'입니다.
위의 경우는 가로세로 패딩만 조절해도 문제가 없으므로 아래 코드를 CSS에 넣습니다.
@media (max-width: 480px)
{
.jumbotron
{
padding: 30px 3px 3px 3px;
margin-bottom: 5px;
}
.jumbotron div
{
padding: 3px;
}
}
이제 가로 폭이 480px이하라면 위의 스타일이 적용됩니다.
미디어 쿼리는 저것 말고도 여러가지 쿼리가 있습니다.
W3C - Media Queries
이 곳들을 들어가서 다양한 미디어 쿼리 사용법을 배워 보세요.
마무리
반응형 디자인이 이슈가 되면서 웹디자인은 미니멀리즘, 씸플리즘이 인기를 끌고 있는데요....
개발자 입장에서 이런 움직임은 좋은 겁니다. ㅋ
개발량을 줄여주니까요.
웹디자이너들도 더 편해진 것 같고 말이죠. (일단 레이아웃을 하나만 짜면 되니까요 ㅎㅎㅎ)
하지만 화려한 맛(있어 보이는 맛)이 없어서 싫어하시는 분들도 꽤 많더군요. ㅡ,.ㅡ;;
뭐.....기술과 사람을 연결하는 것이 우리 같은 사람들이 하는 일이이지만 말이죠.
하나가 해결돼도 다른 걸로 같은 논쟁을 하고 있을 테니 영원한 숙제 같은 것이죠 ㅎㅎㅎ
