그래 봤자, 거의 대부분은 단순히 화면 크기에 따라 보여 주는걸로 끝낸다.
단지 화면 크기에만 반응 할수 있는건 아니지만, 반응형 웹 자체가 최대한 작업량을 줄이는 것이 목적인 만큼, 괜히 쓸데없이 작업량을 늘리는 쪽으로 설계하는 경우는 그다지 없다.
그래서 일반적으로 적용하는 화면 크기가 (어디까지나 나의 기준) ...
<style type="text/css">
/* PC */
@media screen and (min-width: 1050px)
{
}
/* PAD - 가로모드 */
@media screen and (max-width: 1050px)
{
}
/* PAD */
@media screen and (max-width: 800px)
{
}
/* iPhone, Android */
@media screen and (max-width: 480px)
{
}
</style>
-... 요정도.
이정도만 고려 해서 작업 해도 Pc, Pad, Phone 등에는 별 무리 없이 적용된다.
그 외에는 필요에 따라 직접 테스트를 해보고, 필요한 화면 크기를 추가 하던지 하면 된다.
이때 고려 해야 할것이,
@media screen and (max-width: ***px) 형태로 쓸 것인가,
@media screen (min-width: ***px) and (max-width: ***px) 형태로 쓸 것인가... 다.
별다른 차이는 없다.
보면 알겠지만, max-width 만 지정하는 것은 하위 화면크기에 다른 옵션들의 값이 같이 적용될 수 있다는 것이다.
즉, 위의 예제의 경우 화면 크기가 800px 일 경우 "max-width: 800px" 은 당연히 적용되지만, "max-width: 1050px" 의 설정도 같이 적용된다는 것이다.
화면 크기가 480px 일 경우라면 480px, 800px, 1050px 의 스타일이 적용된다.
물론 나중에 정의된 스타일 속성이 적용된다는 특성상, 필요할 경우 아래쪽에서 꼼꼼하게 스타일을 재설정 해놓으면 그다지 문제는 없다.
이 특징을 이용해, 적용범위가 넓은 속성은 넓은 화면 속성에 지정해 놓고, 작은 화면 속성에는 화면이 작아질 경우에 바뀌는 속성만 정의 해놓음으로서 작업량을 줄일 수 있다.
반면 min-width / max-width 를 둘다 지정해 놓을 경우, 하위 화면 크기일지라도 지정한 화면 범위에 들어 있지 않으면 해당 속성이 적용되지 않으니, 이것을 주의 해야 한다.
min-width / max-width 을 지정하는 것이 좋아 보이겠지만, 화면 크기 마다 스타일을 꼼꼼하게 재지정해야 해서 작업량이 늘어나는 경향이 있으며, max-width 만 지정하는 경우는 상단의 스타일 시트에서 화면크기가 변화 했을 때 바뀌어야 할 스타일만을 추가로 재정해 주면 되므로 작업량이 비교적 적다는 장점이 있다.
예를 들자면...
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPageDefault.master.cs" Inherits="web_MasterPage_MasterPageDefault" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
<style type="text/css">
/* PC */
@media screen and (min-width: 1050px)
{
body {background-color:#ff0000;}
body:before{content:'넓이 : min width 1050px';}
}
/* PAD - 가로모드 */
@media screen and (max-width: 1050px)
{
body {background-color:#ff6a00;}
body:before{content:'넓이 : width 1050px';}
}
/* PAD */
@media screen and (max-width: 800px)
{
body {background-color:#ffd800;}
body:before{content:'넓이 : width 800px';}
table {background-color:#ffffff;}
}
/* iPhone, Android */
@media screen and (max-width: 480px)
{
body {background-color:#b6ff00;}
body:before{content:'넓이 : width 480px';}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="table" border="2">
<tr><td>여기는 헤더</td></tr>
<tr>
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
<tr><td>여기는 푸터</td></tr>
</table>
</div>
</form>
</body>
</html>
이렇게 되어 있을 경우.... 화면 크기가 480px 일때...
이렇게 테이블 배경색이 횐색이 된다. (480px 화면 스타일에는 테이블 스타일이 지정되어 있지 않지만, 800px 화면 스타일에 정의 되어 있으므로 그것이 적용됨)
하지만...
이렇게 범위를 제한을 하면...
이렇게 저 범위에 포함되지 않는 화면크기에는 적용이 되지 않는다.
즉, min-width / max-width 로 지정했을 경우 화면 크기가 바뀌었을때 상위 화면 설정을 그대로 유지 하고 싶어도 유지가 되지 않는다.
반면, max-width 만 지정하면 스타일을 재지정 하지 않는 한, 하위 화면 크기에서 상위 화면 크기의 설정이 유지된다는 장점이 있기는 하지만, 스타일 시트 소스가 매우 커질 경우, 적용된 스타일 속성이 어디에 있는지 가늠하기 어려워 진다는 단점이 있다.
뭐, 어느 방식이든 장단점은 있으니, 필요에 따라 적당히 쓰면 된다.
