css layout을 경험해 보았습니다. > 그누3 팁자료실

그누3 팁자료실

css layout을 경험해 보았습니다. 정보

HTML css layout을 경험해 보았습니다.

본문

팁이라 말씀드릴수는 없군요.
그냥 제가 공부한 내용입니다.
head.php  tail.php head.sub.php  tail.sub.php  main.php  style.css  등등을 수정하여
css layout을 구현했습니다. 아직 table 전체를 div로 교체한 것은아니구요.
그래서, 소스를 보면 table로 구현된 곳의 소스가 지저분한 것을 확실히 볼 수 있습니다. ^^;

넷스케이프와 익스플로러 모두에서 별 차이없이 보이는군요.
넷스케이프에서 오른쪽 날개가 밑으로 겹쳐지는 현상을 제외하면... ^^;

html 소스의 내용이 한결 가벼워지는군요.
다만, style.css가 무거워지는 것은 어쩔수 없구요.


<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
<title>  </title>
<link rel='stylesheet' href='./style.css' type='text/css'>
</head>

<script language='JavaScript' src='./javascript.js'></script>

<body leftmargin='2' topmargin='2' >

<!-- 상단 책갈피 -->
<a name='gnuboard_head'></a>

<script language='JavaScript'>
<!-- //-->
    }
</script>

<div id='page'>

<div id='pageHead'>
<div id='logo'>
<a href='./'><img src='image/u.jpg' border=0 alt='' height=60 align='absmiddle'> <span class='top_title'>TITLE</span></a>
</div>
<div id='top_bar'>
<div id='top_menu'>
<a href='./'>HOME</a> | <a href='./?doc=bbs/mblogin.php&url='>로그인</a> | <a href='./?doc=bbs/mbform.php'>회원가입</a> </div>
<!-- 그누보드 외부 검색 폼 -->
<div id='top_search'>
<TABLE cellpadding=0 cellspacing=0 border=0 height=28 align='right'>
<form name=fgnusearch method=get action='./' >
<input type='hidden' name='doc'          value='bbs/gnusearch.php'>
<input type='hidden' name='sselect'      value='wr_subject|wr_content'>
<input type='hidden' name='soperator'    value='0'>
<input type='hidden' name='srch_rows'    value='5'>
<input type='hidden' name='srch_comment'  value='1'>
<input type='hidden' name='srch_days'    value='0'>
<TR>
<TD>
<img src='image/title_search.gif' align=absmiddle> &nbsp;
<input type=text class=input name='stext' size=15 required minlength=2 itemname='검색어' value=''>
<input type=image src='image/btn_go.gif' border=0 align=absmiddle>&nbsp;&nbsp;
</TD>
</TR>
</form>
</TABLE>
</div>
</div>
</div>


<div id='pageBody'>


<div id='leftWing'>
<div id='logInOut'>
<table cellpadding=0 cellspacing=0 border=0>
<form name=fhead method='post' action='./?doc=bbs/mblogincheck.php' autocomplete='off'>
<input type=hidden name=url value=''>
<tr><td>
<div class='logInOut_1_1'>
<div class='logInOut_1_1_1'>ID : </div>
<div class='logInOut_1_1_2'><input type=text name=mb_id class=input size=15 maxlength=20 required itemname="아이디" value=""></div>
</div>


<div class='logInOut_1_1'>
<div class='logInOut_1_1_1'>PW : </div>
<div class='logInOut_1_1_2'><input type=password name=mb_passwd class=input size=15 maxlength=20 required itemname="비밀번호"></div>
</div>


<div class='logInOut_2'>
<input type=image src='./bbs/skin/outlogin/sishop11/btn_login.gif' border=0 alt="로그인">
<a href="./?doc=bbs/mbform.php"><img src='./bbs/skin/outlogin/sishop11/btn_join.gif' border=0 alt="회원가입"></a>
</div>

<div class='logInOut_3'>
<img src='./bbs/skin/outlogin/sishop11/icon1.gif'><a href="javascript:winopen('./?doc=bbs/mbpasswdforget.php', '', 'left=50, top=50, width=415, height=165, scrollbars=1');">&nbsp;<span style='font-size:8pt; color:#000000;'>비밀번호찾기</span></a>
<input type=checkbox name=id_save value='1' ><span style='font-size:8pt;'>ID저장</span></a>
</div>

</td></tr>
</form>
</table>
</div> </div>



<div id='rightWing'>
<!-- 투표 -->
<table width="150" cellpadding=0 cellspacing=0 border=0>
<tr>
    <td>
        <img src="./bbs/skin/vote/sishop11/bar_vote.gif"><br>

        <table width=100% cellpadding=2 cellspacing=0 border=0>
        <form name=fvote method=post action="" onsubmit="return votebox(this);" target="vote">
        <input type=hidden name=vo_id  value='1'>
        <tr><td colspan=2 width=100%><img src="./bbs/skin/vote/sishop11/icon_poll_q.gif" border="0"> 투표를 위한 테스트 테스트를 위한 투표입력</td></tr>

                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='1' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㅁㄴㅇㄻㄴㅇ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='2' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㅁㄴㅇㅁ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='3' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㄴㅇㄹㄴㅇㅈㄷㄺ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='4' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㅌㅌㅌㅊㅍㅍㄴㄱㄷㄹㅈ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='5' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㄵㄹㅈㄷㄹㄴㅇㄹ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='6' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㅊㅌㅊㅍ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='7' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㅌㅊㅍㅌㅌㅊㅍ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='8' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㅌㅍㅌㅊㅌㅍㅇㅀㄷㅈㄱㅀ</td>
        </tr>
                <tr>
            <td valign=top width=20><input type=radio name=gb_vote value='9' style='border-width:0px;'></td>
            <td width=100% style=\"text-align:jusify;\">ㅋㅇㅍㅁㄹ34ㅅㅂ34</td>
        </tr>
       
        <tr>
            <td colspan=2 align=center>
                <input type=image src="./bbs/skin/vote/sishop11/btn_vote.gif" border="0"></td>
        </tr>
        </form>
        </table>

    </td>
</tr>
</table>

<script language='JavaScript'>


</script>
<BR><BR>
<!-- 카운터 -->
<B style='color:#666666'>방문자 수</B>
<HR noshade size=1 color=#eeeeee>

<li/> 오늘 : &nbsp;  2 <li/> 어제 :  &nbsp;  3 <li/> 최대 :  &nbsp;  3 <li/> 전체 : &nbsp;  8 </div>


<div id='pageInnerBody'>

<div id='pageMiddle'>

<table width=100%><tr><td height=25 bgcolor=#F0F0F0>&nbsp;<img src='image/icon_01.gif' align=absmiddle>&nbsp; <a href='./?doc=bbs/gnuboard.php&bo_table=gallery_1'><b>사진 자료실</b></a></td></tr></table><table width=100% bgcolor=#FFFFFF cellpadding=0 cellspacing=0 border=0>
<tr><td colspan=2 height=10></td></tr>


<tr><td colspan=2 align=center height=50>자료가 없습니다.</td></tr>
<tr><td colspan=2 height=5></td></tr>
</table><p><table width=100%><tr><td height=25 bgcolor=#F0F0F0>&nbsp;<img src='image/icon_01.gif' align=absmiddle>&nbsp; <a href='./?doc=bbs/gnuboard.php&bo_table=weblog_forum'><b>토론게시판</b></a></td></tr></table><table width=100% bgcolor=#FFFFFF cellpadding=0 cellspacing=0 border=0>
<tr><td colspan=2 height=10></td></tr>


<tr><td colspan=2 align=center height=50>자료가 없습니다.</td></tr>
<tr><td colspan=2 height=5></td></tr>
</table><p><table width=100%><tr><td height=25 bgcolor=#F0F0F0>&nbsp;<img src='image/icon_01.gif' align=absmiddle>&nbsp; <a href='./?doc=bbs/gnuboard.php&bo_table=weblog_free'><b>자유게시판</b></a></td></tr></table><table width=100% bgcolor=#FFFFFF cellpadding=0 cellspacing=0 border=0>
<tr><td colspan=2 height=10></td></tr>

<tr>
    <td width=30 align=center><img src='./bbs/skin/latest/sishop11/icon_li.gif'></td>
    <td width='' height=20><a href='./?doc=bbs/gnuboard.php&bo_table=weblog_free&wr_id=5'><span class=content>test  <span style='font-size:8pt;'></span></span></a> </td>
</tr>
<tr><td colspan=2 height=1 background='./bbs/skin/latest/sishop11/dot_line.gif'></td></tr><tr>
    <td width=30 align=center><img src='./bbs/skin/latest/sishop11/icon_li.gif'></td>
    <td width='' height=20><a href='./?doc=bbs/gnuboard.php&bo_table=weblog_free&wr_id=4'><span class=content>ㄴㄴㄴㅇㄹ혼ㅇㅀㄴ  <span style='font-size:8pt;'>(2)</span></span></a> </td>
</tr>
<tr><td colspan=2 height=1 background='./bbs/skin/latest/sishop11/dot_line.gif'></td></tr><tr>
    <td width=30 align=center><img src='./bbs/skin/latest/sishop11/icon_li.gif'></td>
    <td width='' height=20><a href='./?doc=bbs/gnuboard.php&bo_table=weblog_free&wr_id=1'><span class=content>ㅅㄷㄴㅅ  <span style='font-size:8pt;'>(2)</span></span></a> </td>
</tr>


<tr><td colspan=2 height=5></td></tr>
</table><p>
</div>
</div>
</div>
</div>

<div id='pageBottom'>
<span style='color:#6E6E6E'>Copyright &copy; Unification Thought Institute. All rights reserved.</span>&nbsp;
</div>

<script language='JavaScript' src='./wrest.js'></script>

<!-- 사용 skin
board    : ./bbs/skin/board/
outlogin : ./bbs/skin/outlogin/sishop11
member  : ./bbs/skin/member/sishop11
latest  : ./bbs/skin/latest/sishop11
vote    : ./bbs/skin/vote/sishop11
-->

</body>
</html>




style.css 추가 내용
------------------
font-size: 28pt;
font-family: 'Arial Black';
color: #B80107;
line-height: 1em;
vertical-align: middle;
}


body {
margin: 20px;
background:#fff;
}

#page {
width:  100%;
padding: 10px;
background:#FFF;
}

#pageHead {
margin-bottom: 10px;
}
#logo {
height:60px;
}
#top_bar {
position:relative;
padding-left: 10px;
height:30px;
background:#B80107;
}
#top_menu {
float:left;
width: 70%;
padding-top:10px;
color:#fff;
}
#top_menu a {
color:#fff;
}

#top_search {
position:absolute;
top: 0px;
right:0px;
width: 300px;
height: 28px;
text-align:right;
background:#eeeeee;
border-top: 1px solid #ccc ;
border-bottom: 1px solid #ccc ;
}

#pageBody {
position: relative;
width:  100%;
margin-bottom: 10px;
}

#leftWing {
position: absolute;
top:0px;
left:0px;
width: 150px;
}

#rightWing {
float:right;
width: 150px;
text-align: center;
background: #fff;
}

#pageInnerBody{
    margin-left:150px;
    margin-right:150px;
    padding-left:10px;
    padding-right:10px;
}

#pageMiddle{
width:  100%;
}

#pageBottom {
    padding:10px;
text-align: right;
border-top: 1px solid #ccc ;
padding-top:3px;
}





#logInOut {
width: 150px;
padding: 5px;
border: 1px solid #efefef;
}
.logInOut_1 {
text-align: center;
height: 20px;
font-size:10pt;
}
.logInOut_2 {
text-align: center;
padding-top: 5px;
height:30px;
}
.logInOut_3 {
text-align: center;
padding-top: 5px;
height: 20px
font-size:9pt;
}

.logInOut_1_1 {
position: relative;
padding: 2px;
}
.logInOut_1_1_1 {
padding-top: 3px;
width: 30px;
font-size:10pt;
text-align: right;
}
.logInOut_1_1_2 {
position:absolute;
top:0px;
right: 0px;
font-size:10pt;
}

소스를 보시라고 그냥 복사해 왔습니다.
처음 phpschool에서 관련 글을 보고 재미있을 것 같아서 찾아 보았습니다.
정확히 한 것인지는 모르겠구요.
다만 넷스케이프와 익스플로러에서 확인했을때 큰 문제는 없더군요.
추천
0
  • 복사

댓글 전체

학식 자기소개 아이디로 검색 회원게시물 (211.♡.♡.146) 04.01.16 09:19:19
저도 CSS로 한 페이지를 구성해보려 노력하여 90%의 성공을 거두었습니다. 확실히 깔끔해지고, 그동안의 table 태그의 사용보다 편리한 점이 많음을 느꼈습니다.
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로