index.php에서 상, 하단에 자동적으로 생성되는 여백을 없애는 방법 정보
index.php에서 상, 하단에 자동적으로 생성되는 여백을 없애는 방법본문
index.php에서 파일을 추출하여 indexhead.php와 indextail.php을 만들어 게시판 생성하면 index.php에서는 존재하던 상단과 하단의 여백이 없어져 버리네요. 상,하단 메뉴의 배경색이 흰색이라서 여백을 고려하여 이미지에 포함된 글자가 가운데에 위치하도록 만들었는데. 게시판 생성시에는 역으로 위, 아래 여백이 잘려져 버리니 이미지의 글자가 위, 아래로 딱 붙어버리는 결과가 되네요. index.php에서의 자동적으로 생성되는 여백은 왜 생기는지, 그것을 없애려면 어떻게 하면 되는지 알려주시면 감사하겠습니다.
==============================================================================================================
<?
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="JavaScript">
<!--
function na_object_show(obj)
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="JavaScript">
<!--
function na_object_show(obj)
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
var is_ns6 = navigator.appName.indexOf('Netscape', 0) != -1 && document.getElementById;
if(is_ns4)
document.layers[obj].visibility = 'show'
else if (is_ns6)
document.getElementById(obj).style.visibility = 'show'
else if(document.all)
document.all(obj).style.visibility = 'visible'
}
document.layers[obj].visibility = 'show'
else if (is_ns6)
document.getElementById(obj).style.visibility = 'show'
else if(document.all)
document.all(obj).style.visibility = 'visible'
}
function na_object_hide(obj)
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
var is_ns6 = navigator.appName.indexOf('Netscape', 0) != -1 && document.getElementById;
if(is_ns4)
document.layers[obj].visibility ='hide'
else if(is_ns6)
document.getElementById(obj).style.visibility = 'hidden';
else if(document.all)
document.all(obj).style.visibility ='hidden'
}
document.layers[obj].visibility ='hide'
else if(is_ns6)
document.getElementById(obj).style.visibility = 'hidden';
else if(document.all)
document.all(obj).style.visibility ='hidden'
}
function na_init_layer_events()
{
if (document.layers) {
document.layers['layer2'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer2'].onmouseout = new Function("na_object_hide('layer2');");
document.layers['layer2'].onmouseover = new Function("na_object_show('layer2');");
document.layers['layer5'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer5'].onmouseout = new Function("na_object_hide('layer5');");
document.layers['layer5'].onmouseover = new Function("na_object_show('layer5');");
document.layers['layer7'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer7'].onmouseout = new Function("na_object_hide('layer7');");
document.layers['layer7'].onmouseover = new Function("na_object_show('layer7');");
document.layers['layer9'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer9'].onmouseout = new Function("na_object_hide('layer9');");
document.layers['layer9'].onmouseover = new Function("na_object_show('layer9');");
document.layers['layer11'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer11'].onmouseout = new Function("na_object_hide('layer11');");
document.layers['layer11'].onmouseover = new Function("na_object_show('layer11');");
}
}
// --></script>
{
if (document.layers) {
document.layers['layer2'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer2'].onmouseout = new Function("na_object_hide('layer2');");
document.layers['layer2'].onmouseover = new Function("na_object_show('layer2');");
document.layers['layer5'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer5'].onmouseout = new Function("na_object_hide('layer5');");
document.layers['layer5'].onmouseover = new Function("na_object_show('layer5');");
document.layers['layer7'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer7'].onmouseout = new Function("na_object_hide('layer7');");
document.layers['layer7'].onmouseover = new Function("na_object_show('layer7');");
document.layers['layer9'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer9'].onmouseout = new Function("na_object_hide('layer9');");
document.layers['layer9'].onmouseover = new Function("na_object_show('layer9');");
document.layers['layer11'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer11'].onmouseout = new Function("na_object_hide('layer11');");
document.layers['layer11'].onmouseover = new Function("na_object_show('layer11');");
}
}
// --></script>
</head>
<body OnLoad="na_init_layer_events();">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="80">
<tr>
<td><img src="test/top.jpg" width="950" height="80" border="0" usemap="#ImageMap1"></td>
<map name="ImageMap1">
<area shape="rect" coords="770, 35, 826, 55" href="http://www.1234.net">
<area shape="rect" coords="843, 35, 898, 54" href="mailto:*** 개인정보보호를 위한 이메일주소 노출방지 ***">
</map>
</tr>
</table>
<body OnLoad="na_init_layer_events();">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="80">
<tr>
<td><img src="test/top.jpg" width="950" height="80" border="0" usemap="#ImageMap1"></td>
<map name="ImageMap1">
<area shape="rect" coords="770, 35, 826, 55" href="http://www.1234.net">
<area shape="rect" coords="843, 35, 898, 54" href="mailto:*** 개인정보보호를 위한 이메일주소 노출방지 ***">
</map>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="65">
<tr>
<td width="25" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="25" height="35">
<tr><td>
<div id="layer3" style="background-image:url('test/lefttop.jpg'); width:25px; height:35px; z-index:1; visibility:visible;">
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer1" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<img src="test/menubar1.jpg" width="180" height="35" border="0">
</div>
<div id="layer2" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<a href="http://1234.com"><img src="test/submenu1.jpg" width="90" height="28" border="0"></a>
<a href="http://5678.com"><img src="test/submenu2.jpg" width="100" height="28" border="0"></a>
<a href="http://5678.com"><img src="test/submenu3.jpg" width="90" height="28" border="0"></a> </div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer4" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<img src="test/menubar2.jpg" width="180" height="35" border="0">
</div>
<div id="layer5" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<a href="http://9012.com"><img src="test/submenu4.jpg" width="90" height="28" border="0"></a>
<a href="http://3456.com"><img src="test/submenu5.jpg" width="90" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer6" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<img src="test/menubar3.jpg" width="180" height="35" border="0">
</div>
<div id="layer7" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<a href="http://7890.com"><img src="test/submenu6.jpg" width="130" height="28" border="0"></a>
<a href="http://1234.com"><img src="test/submenu7.jpg" width="140" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer8" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<img src="test/menubar4.jpg" width="180" height="35" border="0">
</div>
<div id="layer9" style="width:400px; height:30px; position:absolute; left:-80px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<a href="http://5678.com"><img src="test/submenu8.jpg" width="100" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu9.jpg" width="80" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu10.jpg" width="80" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu11.jpg" width="90" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer10" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<img src="test/menubar5.jpg" width="180" height="35" border="0">
</div>
<div id="layer11" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<a href="http://3456.com"><img src="test/submenu12.jpg" width="100" height="28" border="0"></a>
<a href="http://7890.com"><img src="test/submenu13.jpg" width="100" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="25" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="25" height="35">
<tr>
<td>
<div id="layer12" style="background-image:url('test/righttop.jpg'); width:25px; height:35px; z-index:1;">
</div>
</td></tr></table>
</td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="770">
<tr>
<td width="220" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="220">
<tr><td>
<table align="left" cellpadding="0" cellspacing="0" border="0" width="200">
<tr><td>
<?=outlogin('bless_my')?>
</td></tr></table>
</td></tr></table>
<div style='height:10px;'></div>
<tr>
<td width="25" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="25" height="35">
<tr><td>
<div id="layer3" style="background-image:url('test/lefttop.jpg'); width:25px; height:35px; z-index:1; visibility:visible;">
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer1" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<img src="test/menubar1.jpg" width="180" height="35" border="0">
</div>
<div id="layer2" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<a href="http://1234.com"><img src="test/submenu1.jpg" width="90" height="28" border="0"></a>
<a href="http://5678.com"><img src="test/submenu2.jpg" width="100" height="28" border="0"></a>
<a href="http://5678.com"><img src="test/submenu3.jpg" width="90" height="28" border="0"></a> </div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer4" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<img src="test/menubar2.jpg" width="180" height="35" border="0">
</div>
<div id="layer5" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<a href="http://9012.com"><img src="test/submenu4.jpg" width="90" height="28" border="0"></a>
<a href="http://3456.com"><img src="test/submenu5.jpg" width="90" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer6" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<img src="test/menubar3.jpg" width="180" height="35" border="0">
</div>
<div id="layer7" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<a href="http://7890.com"><img src="test/submenu6.jpg" width="130" height="28" border="0"></a>
<a href="http://1234.com"><img src="test/submenu7.jpg" width="140" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer8" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<img src="test/menubar4.jpg" width="180" height="35" border="0">
</div>
<div id="layer9" style="width:400px; height:30px; position:absolute; left:-80px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<a href="http://5678.com"><img src="test/submenu8.jpg" width="100" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu9.jpg" width="80" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu10.jpg" width="80" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu11.jpg" width="90" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="180" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="180" height="35">
<tr>
<td style="position:relative">
<div id="layer10" style="width:180px; height:35px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<img src="test/menubar5.jpg" width="180" height="35" border="0">
</div>
<div id="layer11" style="width:350px; height:30px; position:absolute; left:-10px; top:35px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<a href="http://3456.com"><img src="test/submenu12.jpg" width="100" height="28" border="0"></a>
<a href="http://7890.com"><img src="test/submenu13.jpg" width="100" height="28" border="0"></a>
</div>
</td></tr></table>
</td>
<td width="25" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="25" height="35">
<tr>
<td>
<div id="layer12" style="background-image:url('test/righttop.jpg'); width:25px; height:35px; z-index:1;">
</div>
</td></tr></table>
</td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="770">
<tr>
<td width="220" valign=top>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="220">
<tr><td>
<table align="left" cellpadding="0" cellspacing="0" border="0" width="200">
<tr><td>
<?=outlogin('bless_my')?>
</td></tr></table>
</td></tr></table>
<div style='height:10px;'></div>
<?=poll("basic")?>
<div style='height:10px;'></div>
<?=visit("basic")?>
<div style='height:10px;'></div>
<?=connect()?>
</td>
<td width="730">
</td>
<td width="730">
---------- 여기까지 복사하여 indexhead.php 파일을 만들어 게시판 생성시 사용했으며, 이하는 indextail.php 입니다. ---------------------
</td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="80">
<tr>
<td background="test/bottom.jpg" width="950" height="80" border="0"></td>
</tr>
</table>
</body>
</html>
==============================================================================================================
댓글 전체
자세히 보지는 않았지만...index.php(가운데)에서 공백을 주신거 아니에요?
인덱스가 빠져버리니 공백이 없어진것 같은데...
윗부분 설명만 보고 짐작해봅니다..소스는 살펴보지 않았습니다^^
인덱스가 빠져버리니 공백이 없어진것 같은데...
윗부분 설명만 보고 짐작해봅니다..소스는 살펴보지 않았습니다^^
background="xx.gif"<--- 이것은 좌표값 0,0 으로부터 시작
<body> <--- 이것은 좌표값 약 15,10 정도부터 시작됨. 기본적인 안쪽(바깥쪽인지) 여백이 있습니다.
따라서 두개모두 0,0 으로 맞추실려면......
<body topmargin='0' rightmargin='0' rightmargin='0' > 요것을 하시면 백드라운드 이미지의 모퉁이와 <body>의 시작되는 모퉁이가 맞아 떨어질것입니다. ie의 경우입니다. 실제적용해봤음.
두개다 모서리에서 띄우실려면,margin값을 변경(브라우져마다 개념차이가 있다고 합니다) 하시고,style="background-image:url('./back.gif'); background-position:40px 50px;background-repeat:no-repeat;background-attachment:fixed" 에서 속성값을 변경해서 맞추면 될 것같습니다요..에또 그리고 <div></div>가 기본 파일에는 들어가 있네요..아마도 여백용으로 들어갔다고 생각되네욧
<body> <--- 이것은 좌표값 약 15,10 정도부터 시작됨. 기본적인 안쪽(바깥쪽인지) 여백이 있습니다.
따라서 두개모두 0,0 으로 맞추실려면......
<body topmargin='0' rightmargin='0' rightmargin='0' > 요것을 하시면 백드라운드 이미지의 모퉁이와 <body>의 시작되는 모퉁이가 맞아 떨어질것입니다. ie의 경우입니다. 실제적용해봤음.
두개다 모서리에서 띄우실려면,margin값을 변경(브라우져마다 개념차이가 있다고 합니다) 하시고,style="background-image:url('./back.gif'); background-position:40px 50px;background-repeat:no-repeat;background-attachment:fixed" 에서 속성값을 변경해서 맞추면 될 것같습니다요..에또 그리고 <div></div>가 기본 파일에는 들어가 있네요..아마도 여백용으로 들어갔다고 생각되네욧