니들웍스 주제: 안녕하세요! 인터넷 창에 맞춰서 블로그를 가운데 조정하고 싶은데요,
안녕하세요 ^^
친구가 부탁해서 개발자도구로 try하면서 만들어보다가 한계점에 도달했네요..
홈피: www.kogoon.com
다른게 아니라, 블로그를 header, footer없이 심플하게 만들고, body안에 table로 감쌌는데요,
양 옆(가로)으로는 가운데 정렬이 되서 인터넷 창을 줄이거나 늘리거나 할때 가운데 위치하는데
위아래로는 그게 안되네요..
창에 넓이에 상관없이 가운데 위치하게 하고 싶은데..
크롬 개발자도구등으로 내용보면 html이 내용 길이에 따라 위아래길이가 바뀌는데 화면창 크기에 따라
바뀌면 될 것 같은데..... 전문가가 아니니 여기서 드디어 한계에 ㅠㅠ
스킨은 "보급형 사진블로그" (http://jessism.com)님을 모태로 시작하였습니다.
이곳 많은 고수님들께 여쭈어봅니다 ㅠ
HTML과 CSS 첨부합니다.
감사드립니다 
HTML과 CSS 첨부합니다 (CSS는 기존스킨에 있던것들이라 별 의미는 없네요^^;)
----------
html
----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Keywords" content="[##_meta_http_equiv_keywords_##]" />
<meta http-equiv="Page-Enter" content="BlendTrans(Duration=0.5)" />
<meta http-equiv="Page-exit" content="BlendTrans(Duration=0.5)" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments" href="[##_comment_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : trackbacks" href="[##_trackback_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments + trackbacks" href="[##_response_rss_url_##]" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
<title>[##_title_##] <s_page_title> :: [##_page_post_title_##]</s_page_title></title>
<script language="javascript" src="./images/flashWrite.js"></script>
</head>
<body>
<div style="margin:0px; padding:0px; border:none; background:none; float:none; clear:none; z-index:0"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td align="center" valign="middle">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<s_t3>
<tbody>
<s_list>
<tr>
<td height="20"></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr><td align="center"><h2 class="title">This is it</h2></td></tr>
<s_keylo>
</s_keylo>
<tr><td>
<ol>
<s_list_rep>
</s_list_rep>
</ol></tb></tr>
</s_list>
</tbody>
<!-- searchList end -->
<!-- 태그 -->
<tbody>
<tr>
<td height="20"></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<s_tag>
<tr><td><h2 class="title">tags</h2></td></tr>
<td> <s_tag_rep>
<a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a>
</s_tag_rep>
</td>
</s_tag>
<tr><td height="40"></td>
</tr>
<tr><td height="20"></td>
</tr>
</tbody>
<!-- 태그끝 -->
<!-- 본문 -->
<tbody>
<s_article_rep>
<tr><td height="20"></td>
</tr>
<tr><td height="10"></td>
</tr>
<td align="center", valign="middle">
<script>flashWrite("./images/title.swf","500","50","title_flash","#ffffff","[##_article_rep_title_##]","[##_article_rep_link_##]");</script>
</td>
<tr><td height="30"></td>
</tr>
<tr><td width="660">
[##_article_rep_desc_##]
</td></tr>
<tr><td height="40"></td>
</tr>
<tr><td height="20"></td>
</tr>
<tr><td>
<s_ad_div>
<a href="[##_s_ad_m_link_##]">modify</a> :
<a href="#" onclick="[##_s_ad_m_onclick_##]">modify(window)</a> |
([##_s_ad_s1_label_##])→<a href="#" onclick="[##_s_ad_s2_onclick_##]">[##_s_ad_s2_label_##]</a> |
<a href="#" onclick="[##_s_ad_t_onclick_##]">Trackback</a> |
<a href="#" onclick="[##_s_ad_d_onclick_##]">Delete</a>
</s_ad_div>
</tr></td>
</s_article_rep>
</tbody>
<!-- 본문끝 -->
</s_t3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
--------------------
css
--------------------
@font-face {
font-family: "맑은 고딕";
src: url(./images/Malgun.eot);
src: local("맑은 고딕"), url(./images/Malgun.ttf) format("truetype");
}
@font-face {
font-family: "나눔고딕";
src: url(./images/Nanum.eot);
src: local("나눔고딕"), url(./images/Nanum.ttf) format("truetype");
}
@charset "utf-8";
body { width: auto;
font: 12px '맑은 고딕', 'batang', 'Trebuchet MS', sans-serif;
color:#333;
background: #ffffff;
}
a {
color: #666;
text-decoration:none;
}
a:link,
a:visited,
a:active {
text-decoration:none;
border:0px;
}
a:hover {
color: #369;
background-color: #eee;
text-decoration:none;
}
img { border : 0; }
/* ===================================================================
Layout
=====================================================================*/
#topmenu {
height: 20px;
background: #fff;
border-bottom: 0px dotted #eee;}
#topmenu:hover{
height: 20px;
background: #ccc;
}
#topmenu .hooker {text-align: left; width: 600px; color:#aaa;}
#header {
width : 600px;
margin:0 auto;
padding: 100px 0 10px 0;
}
#page {
width : 600px;
margin: 0 auto;
background: #FFF;
border: 0px solid #eee;
padding: 30px 0 20px 0;
}
.content {
margin: 0px 0;
}
#footer {
width : 600px;
margin: 25px auto;
text-align:center;
font: 0.9em 'Malgun Gothic', 'Trebuchet MS', sans-serif;
color: #999;
}
/* ===================================================================
Contents
=====================================================================*/
.date, .cnt, .name, .from, .delete { font: 0.9em Trebuchet MS, batang; color: #777;}
.date {font-size: 0.8em;}
.name2 { font:bold 0.95em Trebuchet MS, batang; color:#369;}
/* ===================================================================
Header
=====================================================================*/
.gohome {
margin: 10px 0px;
padding:10px 0px 0px 4px;
word-spacing:-1px;
letter-spacing:5px;
text-align:left;
border-top:0px dotted #CCCCCC;
}
.gohome a.linkstyle {
padding: 0px 0px;
color: #bbb;
background-color: #fff;
font:11px trebuchet MS, batang;
text-decoration: none;
}
.gohome a.linkstyle:hover {
color: #369;
background-color: #fff;
text-decoration: none;
}
.gohome a.linkstyle:active {
text-decoration: none;
}
.blogtitle{
margin:0px;
padding:0px;
text-align:center;
font:bold 30px Times new roman, trebuchet MS, batang;
color: #333;
text-decoration: none;
}
.blogtitle a {
color: #333;
text-decoration: none;
}
.blogtitle a:hover{
color: #333;
background-color: #fff;
text-decoration: none;
}
.blogmenu {
margin: 0px 0px;
padding:10px 0px 0px 4px;
word-spacing:-1px;
letter-spacing:5px;
text-align:center;
border-top:0px dotted #CCCCCC;
}
.blogmenu a.linkstyle {
padding: 0px 0px;
color: #bbb;
background-color: #fff;
font:11px trebuchet MS, batang;
text-decoration: none;
}
.blogmenu a.linkstyle:hover {
color: #369;
background-color: #fff;
text-decoration: none;
}
.blogmenu a.linkstyle:active {
text-decoration: none;
}
.footer1 {width : 600px;
margin: 25px auto;
text-align:center;
font: 0.9em 'Malgun Gothic', 'Trebuchet MS', sans-serif;
color: #999;
}
/* ===================================================================
Search
=====================================================================*/
.search {
border: 2px solid #eee;
background: #eee;
padding: 2px;
margin-bottom: 2px;
width:150px;
height:13px;
font: 0.9em 'Malgun Gothic', 'Trebuchet MS', sans-serif;
color:#999;
}
/* ===================================================================
top, bottom background
======================================================================*/
#top {
background:url("images/top.gif") repeat-y;
height: 30px
}
#bottom {
background:url("images/bottom.gif") repeat-y bottom;
height: 30px;
}
/* ===================================================================
Contents
=====================================================================*/
.content {
line-height: 170%;
}
.content h2 {
font: 25px segoe script, trebuchet MS;
font-weight: normal;
}
/* ===================================================================
Search List
=====================================================================*/
.searchList h3 {color: #ccc;
font-weight: normal;
margin-bottom: 20px;}
.searchList ul, .searchList ol {
margin: 0 0 15px 0;
padding: 0 0 0 10px;
list-style:none;
}
.searchList li {
padding: 0;
}
.searchList a:hover {
color: #369;
background-color: #eee;
text-decoration: none;
}
/* ===================================================================
Local Log
=====================================================================*/
.localog .spot {
background:url(images/iconIndentArrow_local.gif) 5px 0 no-repeat;
padding-left:20px;
margin-top:5px;
}
.localog .info {
background:url(images/iconIndentArrow_localinfo.gif) 0 50% no-repeat;
padding:3px 6px 3px 8px;
margin-top:2px;
}
/* ===================================================================
Keywords
=====================================================================*/
.taglog ul, .keywords ul {
padding:10px;
margin:0;
text-align:justify;
}
.taglog li, .keywords li {
display:inline;
}
.taglog a { text-decoration:none; }
.taglog li .cloud1 {
font: bold 1.3em 'Malgun Gothic', 'Trebuchet MS', batang;
color:#FF3399;
}
.taglog li .cloud2 {
font: bold 1.2em 'Malgun Gothic', 'Trebuchet MS', batang;
color: #369;
}
.taglog li .cloud3 {
font: bold 1.0em 'Malgun Gothic', 'Trebuchet MS', batang;
color:#369;
}
.taglog li .cloud4 {
font: normal 0.9em 'Malgun Gothic', 'Trebuchet MS', batang;
color:#333;
}
.taglog li .cloud5 {
font: normal 0.9em 'Malgun Gothic', 'Trebuchet MS';
color:#666;
}
/* ===================================================================
Page Error
=====================================================================*/
#page-error {
font : bold 1.3em tahoma, sans-serif;
text-align:center;
padding: 80px;
}
/* ===================================================================
Article
=====================================================================*/
.title {
color: #333;
font:28px Nanumgothic, Malgun Gothic, batang, Trebuchet MS;
margin: 20px 40px;
padding: 0px;
text-align:center;
}
.title a{
font:28px Nanumgothic, Malgun Gothic, batang, Trebuchet MS;
color: #333;
background-color: #fff;
text-align:center;
}
.titlepost {
color: #333;
background-color: #fff;
font:28px Nanumgothic, Malgun Gothic, batang, Trebuchet MS;
letter-spacing: -2px;
word-spacing: -3px;
margin: 10px -10px 10px;
padding: 0px -10px 0px;
text-align:center;
}
.titlepost a{
font:28px Nanumgothic, Malgun Gothic, batang, Trebuchet MS;
color: #333;
background-color: #fff;
text-align:center;
}
.entry h2 a{
color: #333;
text-decoration:none;
}
.entry h2 a:hover {
color: #333;
text-decoration:underline;
}
.posted {
margin: 0 0 5px 0;
}
.admin { color: #ccc;
margin: 0;
font-size: 0.9em;
text-align: center;
}
.admin a{ color: #ccc;
margin: 0;
font-size: 0.9em;
text-align: center;
}
.article {
margin: 30px 0 0 0;
text-align: justify;
font-size: 1.0em;
}
.article a {
color: #336699;
text-decoration:none;
}
.article a:hover {
color: #369;
background-color: #eee;
text-decoration: none;
}
.article img { border: 0;}
.article .cap1 { font:1.0em trebuchet MS, batang; margin:3px ; color: #999; text-align: center;}
.article .dual { margin-bottom:5px; } /* 그림 2개 */
.article .triple { margin-bottom:5px; } /* 그림 3개 */
.article li {
}
.article .moreless_fold { padding-left:18px; background:url(images/btn_open.gif) 0 50% no-repeat ;}
.article .moreless_top { padding-left:20px; background:url(images/btn_close.gif) 0 50% no-repeat ;}
.article .moreless_bottom { display:none;}
.article blockquote {
border-left: 4px solid #ccc;
clear: both;
color: #555;
display: block;
font:1.0em Verdana,serif;
margin: 12px 16px;
padding-left: 12px;
}
.tagTrail {
margin: 5px 0 15px 0;
}
.tagText {
font: bold 0.9em 'Trebuchet MS';
color: #000;
}
.actionTrail {
text-align:center;
font-size: 0.9em;
padding-bottom: 15px;
border-bottom: 0px dashed #ccc;
margin-bottom: 15px;
margin-top: 20px;
}
.actionTrail a {
font:12px trebuchet MS, batang;
color:#dadada;
text-decoration:none;
}
/* ===================================================================
Trackback
=====================================================================*/
.trackback .tbadd {
font:bold 0.85em trebuchet MS, batang;
text-align: center;
}
.trackback ol {
margin: 5px 0;
padding: 0;
list-style: inside;
}
.trackback li {
padding-bottom: 3px;
}
/* ===================================================================
Comment - List
=====================================================================*/
.comment img {border: 0; }
.comment .name2 a,
.comment .name2 a:hover {
color:#369;
text-decoration:none;
}
.comment a {font-size:0.9em}
color: #666;
text-decoration:none;
}
.comment a:hover {
color :#0064CD ;
text-decoration: underline;
}
.comment .commentList {
padding:0;
}
.comment ol {
padding:0;
margin:0;
list-style: none;
border-top: 1px solid #eee;
} /* 댓글 전체를 감싸는 부분의 스타일 */
.comment ul {
padding:8px; margin:10px 0 0 30px;
list-style: none;
background-color: #faf9f8;
border: 1px dashed #eee;
} /* 댓댓글 전체를 감싸는 부분의 스타일 */
.comment ol li {
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.comment ol li ul li {
padding-top : 0;
border:0;
}
.comment .rp { margin-bottom: 7px; }
/* ===================================================================
Comment - Form
=====================================================================*/
.comment fieldset { margin:10px 0 0 0; border:0; letter-spacing:0;}
* html fieldset {/* \ Not Mac */position:relative; clear:both;margin-top:1.8em;padding:2em 1em 1em;/* */}
.comment legend {font:bold 1.0em 'Franklin Gothic Medium', Helvetica, Sans-Serif;color:#696969;}
* html fieldset legend {/* \ Not Mac */position:absolute;top:-9px;left:20px;/* */}
.comment fieldset div {margin:.3em 0;}
.comment label {padding-left:.2em;font:0.9em 'Franklin Gothic Medium', Helvetica, Sans-Serif;color:#666;vertical-align:middle;}
.comment label span {color:#999;}
.comment input {padding:2px .5em;width: 300px; font:1.0em 맑은 고딕, Gulim, AppleGothic,Sans-Serif;vertical-align:middle;color:#666;border:1px solid #ddd; }
.comment textarea {padding:2px .5em;width:100%;height:100px;border:1px solid #ddd;font:1.0em Gulim,,AppleGothic, Sans-Serif;color:#666; overflow:hieedn;}
.comment .checkbox {background:none;padding:0;width:12px;border:0 none;}
.comment .submit input {margin-top:1em;padding:.3em;width:100px;height:25px;font-size:.9em;color:#666;cursor:pointer;}
/* ======================================
Content - Paging
=========================================*/
.paging { color: #fff;
text-align:center;
font:9px verdana;
margin: 0px 0;
padding-top: 5px;}
.paging a {color: #fff;}
.paging .numbox {
padding-left:6px;
margin-left:6px;
}
.paging .num {
padding:4px;
margin:2px;
}
.selected {
font-weight:bold;
color:#369;
background:none;
}
/* ======================================
Sidebar - from Tistory Gallery skin
=========================================*/
#sidebar_close {display:none;}
#sidebar {
color:#8b8a8a;
line-height: 170%;
}
.open_close {
font: 0.9em 맑은 고딕, 'Trebuchet MS', Sans-serif;
text-align:center;
border-top: 0px dotted #ddd;
border-bottom: 0px dotted #ddd;
padding: 4px;
margin-bottom: 10px ;
}
.open_close a { color:#fff;}
.open_close img {margin:0 0 0 2px;}
.sidebox, .sidebox2, .sidebox3{
text-align:justify;
margin: 15px 0;
}
.sidetitle {
color: #369;
font:bold 12px 'Trebuchet MS', batang, sans-serif;
word-spacing:-1px;
letter-spacing:3px;
}
/* sidebox ul, li style */
.sidebox ul, .sidebox2 ul, .sidebox3 ul{
margin:0;
padding:0;
word-spacing:-1px;
}
.sidebox ul li {
display:inline;
margin:10 5 0px;
padding:0 5 0px;
}
.sidebox3 li {
margin:1px;
padding:0px;
display:inline;
}
.sidebox3 li a {margin:0px; color:#848484;}
.sidebox3 ul li ul {}
.sidebox3 ul li ul li { word-spacing:-2px; font:bold 13px 'Trebuchet MS', batang; display:inline;} /* 덜 세세한 카테고리 -.-; */
.sidebox3 ul li ul li ul {display:inline;}
.sidebox3 ul li ul li ul li {word-spacing:-2px; font:12px 'Trebuchet MS', batang; } /* 가장 세세한 카테고리 */
.c_cnt {padding:1px; margin:1px; font:0.75em Tahoma, Helvetica, Arial, Gulim, sans-serif; color:#999; }
/* sidebox tag cloud */
.sidebox2 ul.tagcloud li {
list-style:none;
display:inline;
background:none;
}
.sidebox2 ul.tagcloud li .cloud1 {
font: bold 1.0em batang, trebuchet MS;
color: #FF3399
}
.sidebox2 ul.tagcloud li .cloud2 {
font: bold 1.0em batang, trebuchet MS;
color: #369;
}
.sidebox2 ul.tagcloud li .cloud3 {
font: bold 0.9em batang, trebuchet MS;
color:#669933;
}
.sidebox2 ul.tagcloud li .cloud4 {
font: normal 0.9em batang, trebuchet MS;
color:#333;
}
.sidebox2 ul.tagcloud li .cloud5 {
font: normal 0.9em batang, trebuchet MS;
color:#666;
}
.rss1 {text-align: center;}
.clear {clear: both; }
/* calendar */
.cal_month { font-size : 11px; height: 18px; } /* 달력의 년월일, 이전달, 다음달을 표시하는 스타일 */
.cal_week1 { font-size : 11px; height:18px;} /* 달력의 요일명을 표시하는 스타일 */
.cal_week2 { font-size:11px; } /* 일요일 요일명을 표시하는 스타일 */
.cal_week { } /* 달력의 주(Week) 단위를 표시하는 스타일 */
.cal_current_week { background-color:#f2f2f2; } /* 달력의 현재 주(Current Week)를 표시하는 스타일 */
.cal_day {} /* 현재 달을 포함하는 전체 날짜(Day)의 스타일 전체 */
..cal_day_sunday { } /* 현재 달을 포함하는 전체 날짜의 일요일 스타일 */
.cal_day1 { color: #fff; font-size:11px; text-align: center;} /* 해당 달력에서 이전달 날짜를 표시하는 스타일 */
.cal_day2 { color: #000; font-size : 11px; text-align: center;} /* 해당 달력에서 다음달 날짜를 표시하는 스타일 */
.cal_day3 { font-size : 11px;} /* 현재 달력의 이번달 날짜를 표시하는 스타일 */
.cal_day4 {
text-align: center;
font-size: 11px;
text-decoration:underline;
color: #4284B0;
} /* 오늘 날짜를 표시하는 스타일 */
a.cal_click:link, a.cal_click:visited { color : #777; }
a.cal_click:hover { color: #4284B0; } /* 글을 작성한 날의 링크 스타일 */
/* IE 버그 */
*:first-child+html .rss_feed .rss {position:relative; top:1px;}
* html .rss_feed .rss {position:relative; top:1px;}
* html .rss_feed {padding:2px 0 0 0;}
*:first-child+html .tag .article_post {padding:7px 15px 21px 15px;}
* html .tag .article_post {padding:7px 15px 21px 15px;}
* html .ib {height:18px;}
*:first-child+html .ib {height:18px;}/* CSS Document */
-------------------------------------