모바일 화면에 꽉차게 하고싶습니다.
본문
http://wappleedu.com/vertical2.html
모바일 제작은 처음이라 많이 틀리고 있습니다. 스마트폰이나 아이패드로 확인했을때 화면에 최대한 채우고 싶습니다. 어떤 방법이 있을까요? 고수님들 돠와주세요. 감사합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(주)와플</title>
<style type="text/css">
#m01 {
position: absolute;
left: 50%;
top: 100px;
width: 922px;
height: 1030px;
z-index: 1;
margin-left: -461px;
}
</style>
</head>
<body>
<div id="m01">
<table width="921" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="456"><a href="../../s1-0.html"><img src="wappleimg/0905/mobile/m01.gif" width="456" height="225" /></a></td>
<td width="324"><a href="../../s2-0.html"><img src="wappleimg/0905/mobile/m02.gif" width="465" height="225" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="921" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="../../bbs/board.php?bo_table=balpyo"><img src="wappleimg/0905/mobile/m03.gif" width="228" height="347" /></a></td>
<td><table background="wappleimg/0905/mobile/m04bg.gif" width="693"height="347" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="685" align="left" valign="top"><?include"dot_slide.htm";?></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="921" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="../../s3-1.html"><img src="wappleimg/0905/mobile/m05.gif" width="456" height="225" /></a></td>
<td><a href="../../s4-1.html"><img src="wappleimg/0905/mobile/m06.gif" width="465" height="225" /></a></td>
</tr>
<tr>
<td><a href="http://wappleshop.com"><img src="wappleimg/0905/mobile/m07.gif" width="456" height="233" /></a></td>
<td><a href="http://focam.co.kr"><img src="wappleimg/0905/mobile/m08.gif" width="465" height="233" /></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
답변 1
반응형 디자인
미디어쿼리
html5 선언
뷰포트 정의 등 검색해서 알아보세요.
재미있네요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>반응형웹</title>
</head>
<body>
<style>
*{padding:0; margin: 0;}
body {padding: 50px;}
li{list-style: none;}
@media( min-width:0px) and (max-width:500px){
body {background:pink;}
}
@media (min-width:501px){
body { background: skyblue;}
}
</style>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
