반응형 웹 (Responsive Web) 을 제작하기위한 기초, 미디어 커리 (CSS3 Media Query) 테스트
반응형 웹을 제작하기 위해서 사용되는 핵심적인 수단이 CSS3의 Media Query 일 것이다.
Media Query를 이용하면 웹 클라이언트 디바이스의 화면 폭과 크기등에 따라서 동적인 레이아웃을 설정할 수 있기 때문이다.
다시 말하면 클라이언트의 화면 크기에 따라 조건부로 적용될 스타일시트를 선언하면 다양한 크기의 화면에 반응하는 레이아웃을 구현할 수 있다.
반응형 웹(Responsive Web)을 제작하기 위해 핵심적인 원리인 Media Query를 작성하고 테스트하는 스타일시트를 작성해보았다.
화면의 크기가 500px 이하인 경우에는 배경색을 적색으로 설정하는 Media Query
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width">
<title>Media Query</title>
<style type="text/css">
@media (max-width:500px) {
body {
background-color:red;
}
}
</style>
</head>
<body>
</body>
</html>
DIV 태그에 CSS float:left 를 적용하면 웹 클라이언트 화면의 폭에 따라서 레이아웃이 자동으로 변경된다
화면의 폭이 충분한 경우에는 4개의 4각 영역이 좌에서 우로 횡으로 배치되며, 점차 화면의 폭이 좁아지면서 4개의 DVI 영역이 횡으로 배치될 공간이 부족하게 되면 우측 끝에 있는 DIV 태그는 아래로 내려와서 첫번째 컬럼에 자리를 하게 된다.
아무런 설정 없이도 화면이 폭에 따라서 제대로 레이아웃이 변경되는 것처럼 보이지만 DIV태그의 영역 자체는 화면과 함께 줄어들지 않고 DIV 태그에 주어진 폭을 고수하다가 자리가 없어지면 아래로 내려오는 동작을 보여준다.
여기서 CSS를 설정할 때 아직 Media Query를 사용하지 않은 상태이다
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width">
<title>Media Query</title>
<style type="text/css">
#div1 {
width:200px; height:200px;
background-color:red;
float:left;
}
#div2 {
width:200px; height:200px;
background-color:green;
float:left;
}
#div3 {
width:200px; height:200px;
background-color:blue;
float:left;
}
#div4 {
width:200px; height:200px;
background-color:yellow;
float:left;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
화면의 폭이 줄어들면 횡으로 배치된 DIV 태그의 폭도 비례하여 줄어들게 하려면 아래처럼 폭을 설정할 때 절대크기(px)가 아닌 상대적인 크기(%)로 지정하면 된다
#div1 {
width:22%; height:200px;
background-color:red;
float:left;
}
#div2 {
width:22%; height:200px;
background-color:green;
float:left;
}
#div3 {
width:22%; height:200px;
background-color:blue;
float:left;
}
#div4 {
width:22%; height:200px;
background-color:yellow;
float:left;
}
위의 스타일은 화면의 크기에 따라 비례하여 DIV 태그의 폭도 줄어들기는 하지만 너무 좁아져서 이용자가 내용을 읽기 어렵게 되도록 작아져도 다른 레이아웃이 적용되지 않는다. 바람직한 것은 DIV 태그가 어느정도 폭이 줄어들면 더 이상 줄어들지 않고 아래 행으로 내려가서 공간을 확보하도록 설정하는 것이다.
아래의 스타일은 미디어 커리(Media Query)를 적용하여 화면의 폭이 900px 이상인 경우에는 4개의 DIV가 횡으로 배치되도록 한 것이며 900px 이상인 경우에는 화면의 폭에 비례하여 DIV 태그의 영역도 따라서 변경된다.
<style type="text/css">
@media (min-width:900px)
{
#div1 {
width:22%; height:200px;
background-color:red;
float:left;
}
#div2 {
width:22%; height:200px;
background-color:green;
float:left;
}
#div3 {
width:22%; height:200px;
background-color:blue;
float:left;
}
#div4 {
width:22%; height:200px;
background-color:yellow;
float:left;
}
}
</style>
위의 미디어 커리가 실행되면 화면의 폭이 900px 이상인 경우에는 화면의 폭에 따라서 모든 DIV 태그의 영역이 비례하여 변경되는 것을 확인할 수 있지만 900px 이하로 작아지면 화면에서 DIV 태그들이 보이지 않게 된다. 즉, 900px 이하로 화면 폭이 작아질 때 적용한 스타일 시트가 없기 때문에 발생하는 현상이다. 그러므로 각 변경 단계마다 적용할 스타일 시트가 선언되어야 한다는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width">
<title>Media Query</title>
<style type="text/css">
*
{ /*모든 태그의 박스 크기에 테두리나 내부여백이 영향을 미치지 않도록 설정함 */
margin:0; padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.wrap {
border: 1px solid #f00;
}
.clear:after {
content: "";
display: table;
clear: both;
}
#div1 { background-color:red; }
#div2 { background-color:green;}
#div3 { background-color:blue;}
#div4 { background-color:yellow;}
#div5 { background-color:black;}
@media (min-width:901px)
{
#div1,#div2,#div3,#div4,#div5 {
width:20%; height:100px;
float:left;
}
}
@media (min-width:801px) and (max-width:900px)
{
#div1,#div2,#div3,#div4 {
width:25%; height:100px;
float:left;
}
#div5 {
width:auto; height:100px;
clear:both;
}
}
@media (min-width:701px) and (max-width:800px)
{
#div1,#div2,#div3 {
width:33.3%; height:100px;
float:left;
}
#div4,#div5 {
width:50%; height:100px;
float:left;
}
}
@media (min-width:601px) and (max-width:700px)
{
#div1,#div2,#div3,#div4 {
width:50%; height:100px;
float:left;
}
#div5 {
width:auto; height:100px;
clear:both;
}
}
@media (max-width:600px)
{
#div1,#div2,#div3,#div4,#div5 {
width:100%; height:100px;
float:none;
}
}
</style>
</head>
<body>
<div class="wrap clear">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</div>
</body>
</html>