테이블 중앙정렬 질문입니다
냐즈
4년 전
조회 3,464
그누보드5 기반으로 만들어진 아보카도 에디션을 통해 개인홈페이지를 만들고자 해서 제작중입니다.
이런 식으로 테이블을 짜서 가운데 테두리 쳐진 상자 부분에 글이 나오는 노프레임 홈을 계획했습니다. 표를 세로로 세 칸 되게 만들어서 맨 윗칸에는 이미지, 가운데 셀에는 배경이미지, 맨 아래 셀에는 이미지를 써서 흔하게 하는 노프레임 방식으로 테이블 코드도 짰었는데
(head와 tail 파일에 각각 이렇게 들어가있습니다)
이런식으로 써놨더니
홈페이지에서는 이렇게 테이블이 중앙정렬이 되지가 않더라구요..테이블 안에 게시판이 들어가게 하고 싶었는데 중앙정렬이 되지 않았고 심지어 가로로는 또 반복되어서 나옵니다ㅜㅜ
이 코드를 작성한 것 중 head(주소는 일부러 가린겁니다.)는 이렇게 되어있구요
</p>
<p><?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php'); </p>
<p>/*********** Logo Data ************/
$logo = get_logo('pc');
$m_logo = get_logo('mo');</p>
<p>$logo_data = "";
if(!$logo && !$m_logo)$logo_data=$config['cf_title'];
else{
if($logo) $logo_data .= "<img src='".$logo."' ";
if($m_logo) $logo_data .= "class='only-pc' /><img src='".$m_logo."' class='not-pc'";
if($logo_data) $logo_data.= " />";
}
/*********************************/</p>
<p>$main_link=get_main_link();
?></p>
<p><!-- 헤더 영역 -->
<header id="header">
<div class="fix-layout">
<!-- 로고 영역 : PC 로고 / 모바일 로고 동시 출력 - 디자인 사용을 체크하지 않을 시, 제대로 출력되지 않을 수 있습니다. -->
<!-- 관리자 기능을 사용하지 않고 로고를 넣고 싶을 시, < ? = $ log_data ? > 항목을 제거 하고 <img> 태그를 넣으세요. -->
<?if($config['cf_logo_use']!='N'){?>
<h1 id="logo">
<a href="<?=$main_link?>">
<?=$logo_data?>
</a>
</h1>
<?}?>
<!-- 로고를 삭제하고 싶을 경우 위의 <h1 ... </h1> 부분을 삭제하시면 됩니다 --></p>
<p> <!-- 모바일 모드에서 메뉴를 열고 닫기 할 수 있는 버튼 -->
<a href="#gnb_wrapper" id="gnb_control_box">
<img src="<?=G5_IMG_URL?>/ico_menu_control_pannel.png" alt="메뉴열고닫기" />
</a>
<script>
$('#gnb_control_box').on('click', function() {
$('body').toggleClass('open-gnb');
return false;
});
</script>
<!-- 모바일 메뉴 열고 닫기 버튼 종료 --></p>
<p> <div id="gnb_wrapper">
<?
if($config['cf_menu_content']){
$menu_co=explode(",",$config['cf_menu_content']);
$menu_content = get_site_content($menu_co[1]);
echo '<div id="gnb">'.$menu_content.'</div>';
}else{
/**************************************************************
----------------------------메뉴 영역 시작----------------------------
* 원하실 경우 하단의 <div id="gnb"> .... </div> 부분을 수정/삭제 해주세요.
**************************************************************/?>
<div id="gnb">
<ul id="no_design_gnb">
<?
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order*1, me_id ";
$result = sql_query($sql, false);
$count=sql_fetch($sql);
$menu_datas = array();
if($count['me_id']){ $sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order*1, me_id ";
$result = sql_query($sql, false);
$menu_datas = array();</p>
<p> for ($i=0; $row=sql_fetch_array($result); $i++) {
$menu_datas[$i] = $row;</p>
<p> $sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order*1, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
$menu_datas[$i]['sub'][$k] = $row2;
}</p>
<p> }</p>
<p> $i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
$color=$de['menu_text']['cs_value'];
$over=$de['menu_text']['cs_etc_2'];
if($row['me_color']) $color=$row['me_color'];
if($row['me_over']) $over=$row['me_over'];
$img_link='';
if($row['me_img']){
if($row['me_img2']){
$img_link="<img src=\"{$row['me_img']}\" onmouseenter=\"this.src='{$row['me_img2']}'\" onmouseleave=\"this.src='{$row['me_img']}'\" alt=\"{$row['me_name']}\">";
}
else{
$img_link='<img src="'.$row['me_img'].'" alt="'.$row['me_name'].'">';
}
}
?>
<?if($member['mb_level']>=$row['me_level']){?>
<li class="gnb_1dli <?if($i==0) echo " main";?>" >
<a href="<?php echo $row['me_link']?>" target="_<?=$row['me_target']?>" class="gnb_1da" onMouseOver="this.style.color='<?=$over?>'" onMouseOut="this.style.color='<?=$color?>'" style="color:<?=$color?>;"><?php if($row['me_img']) echo $img_link; else echo $row['me_name']; ?></a>
</li>
<?}?>
<?php
$i++;
} //end foreach $row
}else{
$bbs_list=sql_query("select bo_table,bo_subject from {$g5['board_table']} where bo_use_search='1'");
$bbs_admin=sql_query("select bo_table,bo_subject from {$g5['board_table']} where bo_use_search='0'");
for ($i=0;$bbs=sql_fetch_array($bbs_list);$i++){
?>
<li>
<a href="<?=G5_BBS_URL?>/board.php?bo_table=<?=$bbs['bo_table']?>"><?=$bbs['bo_subject']?></a>
</li>
<?}unset($bbs);
if($is_admin){
for ($i=0;$bbs=sql_fetch_array($bbs_admin);$i++){
?>
<li>
<a href="<?=G5_BBS_URL?>/board.php?bo_table=<?=$bbs['bo_table']?>"><?=$bbs['bo_subject']?></a>
</li>
<?}unset($bbs);}
}?>
</ul>
</div>
<? /**************************************************************
----------------------------메뉴 영역 끝----------------------------
**************************************************************/ }?>
</div>
</div>
</header></p>
<p><!-- // 헤더 영역 --></p>
<p><section id="body">
<table width="1025" cellpadding="0" cellspacing="0" align="center" height="496">
<tr>
<td width="1842"><img src="주소" border="0"></td>
</tr>
<tr>
<td width="1842" height="271" background="주소">
<p align="center">
<div class="fix-layout">
<hr class="padding" />
tail 파일 코드는 이렇게 되어있습니다.
</p>
<p><?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<hr class="padding" />
<tr>
<td width="1842"><img src="<a href="http://mystious.dothome.co.kr/images/foot3.jpg"" target="_blank" rel="noopener noreferrer">http://mystious.dothome.co.kr/images/foot3.jpg"</a> border="0"></td>
</tr>
</table>
</div>
</section></p>
<p> <?
if($config['cf_footer_content']){
$footer_co=explode(",", $config['cf_footer_content']);
$footer_content = get_site_content($footer_co[1]);
echo '<footer id="footer">'.$footer_content.'</footer>';
} else { </p>
<p>/**************************************************************
----------------------------푸터 영역 시작----------------------------
* 원하실 경우 하단의 <footer .... </footer> 부분을 수정/삭제 해주세요.
**************************************************************/?></p>
<p><footer id="footer" class="txt-center">
<div id="bgm_box">
<? include(G5_PATH."/template.bgm.php"); ?>
</div>
COPYRIGHT © 2017 by Avocado edited by <a href="<a href="https://extrashot.tistory.com/"" target="_blank" rel="noopener noreferrer">https://extrashot.tistory.com/"</a> target="_blank">daehakwan</a>
</footer></p>
<p><?/**************************************************************
----------------------------푸터 영역 끝----------------------------
**************************************************************/}?> </p>
<p><a href="#header" id="goto_top" class="scroll-fix">
<img src="<?=G5_IMG_URL?>/btn_top.png" />
</a>
<script>
$('#goto_top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});</p>
<p>var h=$("header").outerHeight();
var f=$("footer").outerHeight();
var w=$(window).height();
if(h>=w) h=0;
$("#body").css({"min-height":(w-f-h)+"px"});
window.onresize=function(){
h=$("header").outerHeight();
w=$(window).height();
if(h>=w) h=0;
$("#body").css({"min-height":(w-f-h)+"px"});
}; //@200926
</script></p>
<p>
<script src="<?php echo G5_JS_URL ?>/_custom.js"></script>
<?php
include_once(G5_PATH."/tail.sub.php");
?></p>
<p>
혹시 style.css 파일도 필요할까 싶어 같이 둡니다
</p>
<p>@charset "utf-8";</p>
<p>body { line-height: 1.5em; font-size: 12px; font-family: 'Nanum Gothic'; }
caption { display: none; }
html.single:before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
/*html.single > body {
z-index: 1;
}*/</p>
<p>button { font-size: 12px; font-family: 'Nanum Gothic'; }
/*#body { padding-bottom: 200px; }*/
.form-input { display: block; line-height: 30px; }</p>
<p>input[type="file"] { padding-left: 0 !important; }
.form-input,
input[type="text"],
input[type="password"],
input[type="file"],
select { box-sizing: border-box; height: 30px; border-width: 1px; border-style: solid; padding: 0 10px; max-width: 100%; font-size: 12px; }</p>
<p>.form-input,
input[type="text"].full,
input[type="password"].full,
input[type="file"].full,
select.full { width: 100%; }
textarea {
box-sizing: border-box;
border-width: 1px;
border-style: solid;
padding: 5px;
width: 100%;
min-height: 50px;
font-size: 12px;
}</p>
<p>
.ajax-list-box {
height: 100px;
overflow-y: auto;
margin-top: 10px;
padding: 5px;
}
.ajax-list-box ul,
.ajax-list-box li { display: block; margin: 0; padding: 0; position: relative; }
.ajax-list-box li { margin-bottom: 5px; }
.ajax-list-box li a {
display: block;
position: relative;
padding: 10px 0 10px 70px;
min-height: 40px;
border-radius: 3px;
text-decoration: none;
font-size: 13px;
}
.ajax-list-box li a .ui-thumb { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; line-height: 40px; overflow: hidden; text-align: center; }
.ajax-list-box li a .ui-thumb img { max-width: 100%; }
.ajax-list-box .no-data { line-height: 50px; text-align: center; margin-top: 10px; }</p>
<p>
hr.line {
display: block;
position: relative;
clear: both;
margin: 10px 0;
border: none;
padding: 0;
height: 1px;
}
hr.padding {
display: block;
clear: both;
margin: 0;
padding: 0;
border: none;
height: 30px;
}
hr.padding.small {
height: 5px;
}</p>
<p>.co_container .co_content a, .more_open_close {color:inherit;}</p>
<p>#bo_v_img img {
height: auto !important;
}</p>
<p>
#no_design_gnb {
text-align: center;
} </p>
<p>.close-header #header { width: 0px !important; }
.close-header #body { margin-left: 0 !important; }
.close-header body { min-width: 0; }</p>
<p>@media all and (max-width: 1000px) {
.close-header #header { width: auto !important; }
}</p>
<p>html.single .bgm-player { display: none !important; }
div.co_content .bgm-player {display: inline-block !important;}</p>
<p>/********************
TWITTER
*********************/</p>
<p>.timeline-Body { border: none; font-size: 12px; }
.timeline-Widget { background: none; }
.timeline-Body-notification,
.timeline-Tweet-actions,
.timeline-Header { display: none; }
.timeline-Viewport { height: 100%; overflow: auto; }
.timeline-TweetList { display: block; list-style: none; margin: 0; padding: 0; }
.timeline-Tweet { position: relative; padding: 20px 5px; }
.timeline-Tweet:before { content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; border-top-width: 1px; border-top-style: dashed; }
.timeline-TweetList li:first-child .timeline-Tweet { padding-top: 0; }</p>
<p>.TweetAuthor-link { display: block; position: relative; padding-left: 40px; height: 30px; margin-bottom: 10px; }
.TweetAuthor-avatar { display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 5px; overflow: hidden; }
.TweetAuthor-screenName { color: #777; font-size: 11px; }</p>
<p>.timeline-Tweet-metadata { display: block; position: relative; font-size: 11px; text-align: right; color: #777; padding-right: 10px; }
.timeline-Tweet-metadata a { color: #777; }</p>
<p>.MediaCard-mediaContainer { padding-bottom: 20px !important; }</p>
<p>.timeline-LoadMore { display: none; }
.Emoji { width: 15px; vertical-align: middle; }
.NaturalImage-image,
.CroppedImage-image { height: auto !important; }
.u-floatLeft, .u-floatRight { display: none; }</p>
<p>
/**************************************************************
기본 오브젝트
***************************************************************/</p>
<p>.ui-btn {
display: inline-block;
position: relative;
text-align: center;
border-width: 1px;
border-style: solid;
vertical-align: middle;
height: 28px;
padding: 0 15px;
box-sizing: border-box;
cursor: pointer;
}
a.ui-btn {
line-height: 26px;
}</p>
<p>.ui-btn.small {
height: 25px;
line-height: 23px;
font-size: 12px;
}
.ui-btn.full { width: 100%; }</p>
<p>
.ui-btn.admin {
background: #8c1e1e;
color: #fff;
border-color: #691010;
}
.ui-btn.disable { opacity: .3; }</p>
<p>
.theme-box {
display: block;
position: relative;
padding: 10px;
box-sizing: border-box;
}</p>
<p>table {
width: 100%;
padding:0;
border-spacing:0px;
border:0;
border-collapse:collapse;
table-layout: fixed;
}
th, td {
border: none;
}</p>
<p>.theme-form { table-layout: fixed; }
.theme-form td { padding: 5px; height: 30px; }
.theme-form th { padding: 5px 10px; }
.theme-form .frm_info { display: block; font-size: 12px; padding: 0 0 8px 0; }</p>
<p>.theme-list { table-layout: fixed; }
.theme-list thead th { height: 30px; }
.theme-list td { padding: 5px; height: 30px; }
.theme-list td.no-data { padding: 5px; text-align: center; line-height: 200px; }</p>
<p>/*@media all and (max-width: 640px) {
.theme-list,
.theme-list tbody,
.theme-list thead,
.theme-list tr,
.theme-list td,
.theme-list th {
display: block;
position: relative;
height: auto;
}
.theme-list thead { display: none; }</p>
<p>}*/</p>
<p>.frm_info { display: block; font-size: 12px; padding: 0 0 8px 0; opacity: .7; }</p>
<p>
/**************************************************************
배경음악 이퀄라이저 효과
***************************************************************/</p>
<p>.bgm-player { text-align: center; }
.bgm-player .title {
display: inline-block;
vertical-align: middle;
font-family: 'aphopis';
line-height: 30px;
font-size: 13px;
}
.bgm-player ul {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
margin-right:15px;
}
.bar-equalizer {
display: inline-block;
vertical-align: middle;
position: relative;
width: 90px;
height: 25px;
margin: 0 auto;
overflow: hidden;
text-align: center;
box-sizing: border-box;
margin-left: 15px;
}</p>
<p>.bar-equalizer i {
display: block;
float: left;
width: 1px;
margin-right: 2px;
border-radius: 5px;
margin-top: 15px;
transform: translateY(-50%);
transition: height 0.3s linear;
-webkit-transition: height 0.3s linear;
-moz-transition: height 0.3s linear;
-ms-transition: height 0.3s linear;
-o-transition: height 0.3s linear;
}</p>
<p>.bgm-player li { display: inline-block; }
.bgm-player li a {
display: inline-block;
vertical-align:middle;
position: relative;
width: 12px;
height: 100%;
line-height: 27px;
text-align: left;
text-indent: -999px;
overflow: hidden;
}
.bgm-player li a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: 0;
text-align: center;
font-size: 12px;
}
.bgm-player li a.play:before { content: "▶"; }
.bgm-player li a.stop:before { content: "■"; }</p>
<p>
/**************************************************************
Web Size Viewer Control - 반응형 코딩
-
모바일 기준 : width 1000px
***************************************************************/</p>
<p>@media all and (min-width:1001px) {
.only-pc { }
.only-ta { display: none !important; }
.only-mo { display: none !important; }</p>
<p> .not-pc { display: none !important; }
.not-ta { }
.not-mo { }
}</p>
<p>@media all and (max-width:1000px) and (min-width: 1001px) {
.only-pc { display: none !important; }
.only-ta { }
.only-mo { display: none !important; }</p>
<p> .not-pc { }
.not-ta { display: none !important; }
.not-mo { }
}</p>
<p>@media all and (max-width: 1000px) {
.only-pc { display: none !important; }
.only-ta { display: none !important; }
.only-mo { }</p>
<p> .not-pc { }
.not-ta { }
.not-mo { display: none !important; }
}</p>
<p>
/*******************************************
모바일 메뉴 스타일 (헤더 설정)
********************************************/</p>
<p>#header .fix-layout { padding: 0; }
#logo a{display:block;max-width: 225px; margin:0 auto;}
#bgm_box{padding-top:10px;}
#login_box {padding-top:10px;}
#login_box .ui-btn {padding:0 8px;}
#footer{clear:both;}
@media all and (max-width: 1000px) {
body { width: 100%; }
#logo { padding: 0 10px; z-index:0;float:none;line-height:50px;top: auto; left: auto; transform: translateX(0) translateY(0); position: relative; text-align: center;}
#body { margin-left: 0px; margin-top: 60px; }</p>
<p> #header .fix-layout { padding: 0; height:100%; }
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: auto;
z-index: 999;
width: auto;
height: 50px;
overflow: visible;
}
#gnb_wrapper {
position: fixed;
top: 0;
right: -280px;
bottom: 0;
width: 280px;
z-index: 999;
overflow-y: auto;
}</p>
<p>#no_design_gnb {
float:none;display:block;text-align:center;padding-top:70px;
}
#no_design_gnb li {
display: block;
line-height:30px;
margin-bottom:20px;
}</p>
<p>#login_box, #bgm_box {float:none;}</p>
<p> #gnb_control_box {
position: absolute;
top: 50%;
margin-top: -20px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
}
#gnb_control_box:before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
#gnb_control_box img {
display: inline-block;
max-width: 50%;
max-height: 50%;
vertical-align: middle;
margin-left: -12%;
opacity: 1;
}</p>
<p> #gnb_control_box,
#gnb_control_box * {
transition: all 0s ease;
-webkit-transition: all 0s ease;
-ms-transition: all 0s ease;
}</p>
<p> .open-gnb #gnb_wrapper { right: 0; }
.open-gnb #gnb_control_box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.5);
border-radius: 0;
width: auto;
height: auto;
}
.open-gnb #gnb_control_box img { opacity: 0; }
}</p>
<p>
/**************************************************************
탭 설정
***************************************************************/</p>
<p>#tab_list {
display: block;
position: relative;
overflow: hidden;
border-bottom-width: 2px;
border-bottom-style: solid;
}
#tab_list li {
display: block;
position: relative;
float: left;
}
#tab_list li a {
display: block;
position: relative;
border-bottom-width: 0;
}
#tab_list li + li a {
border-left-width: 0px;
}</p>
<p>
/**************************************************************
페이지 설정
***************************************************************/</p>
<p>.pg_wrap {
display: block;
position: relative;
text-align: center;
padding: 20px 0;
}
.pg_wrap .pg_page {
display: inline-block;
position: relative;
height: 30px;
line-height: 28px;
min-width: 30px;
box-sizing: border-box;
padding: 0 5px;
font-size: 13px;
text-align: center;
vertical-align: middle;
border-width: 1px;
border-style: solid;
}</p>
<p>.pg_wrap .pg_control {
overflow: hidden;
text-align: left;
text-indent: -999px;
}
.pg_wrap .pg_control:before {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: 0;
text-align: center;
font-size: 14px;
}
.pg_wrap .pg_start, .pg_wrap .pg_end {min-width:42px;}
.pg_wrap .pg_start:before { content: "처음"; }
.pg_wrap .pg_end:before { content: "맨끝"; }
.pg_wrap .pg_prev:before { content: "이전"; }
.pg_wrap .pg_next:before { content: "다음"; }</p>
<p>
/**************************************************************
쪽지함 설정
***************************************************************/</p>
<p>.ui-chatting-memo {
position: relative;
margin: 10px 0;
padding: 10px 0;
}</p>
<p>.ui-chatting-memo .ui-message {
position: relative;
padding: 10px 0 10px 80px;
}</p>
<p>.ui-chatting-memo .ui-message .ui-thumb {
position: absolute;
top: 10px;
left: 0;
width: 70px;
overflow: hidden;
}
.ui-chatting-memo .ui-message .info {
position: absolute;
top: 10px;
right: 10px;
}
.ui-chatting-memo .ui-message .ico-new {
display: inline-block;
font-size: 11px;
width: 15px;
height: 15px;
border-radius: 2px;
background: #cb0000;
text-align: center;
line-height: 14px;
font-style: normal;
margin-left: 10px;
color: #fff;
}
.ui-chatting-memo .ui-message .ico-total {
display: inline-block;
font-size: 11px;
width: 15px;
height: 15px;
border-radius: 2px;
text-align: center;
line-height: 14px;
font-style: normal;
margin-left: 5px;
padding: 0;
}
.ui-chatting-memo .ui-message .text {
padding: 10px;
line-height: 1.6em;
margin: 10px 0;
overflow: hidden;
min-height: 50px;
}
.ui-chatting-memo .ui-message .text a {
display: block;
position: relative;
min-height: 50px;
}
.ui-chatting-memo .ui-message .text.mine { opacity: .8; }
.ui-chatting-memo .ui-message .info strong { font-weight: normal; }</p>
<p>.ui-list-control { text-align: right; }</p>
<p>@media all and (max-width: 480px) {
.ui-chatting-memo .ui-message { padding-left: 60px; padding-right: 0; }
.ui-chatting-memo .ui-message .ui-thumb { width: 50px; left: 0; }
.ui-chatting-memo .ui-message .ico-total { display: none; }
.ui-chatting-memo .ui-message .total-text { display: none; }</p>
<p> .ui-chatting-memo .ui-message .pc { display: none; }
.ui-chatting-memo .ui-message .mo { display: inline; }
}</p>
<p>
/*** 쪽지 보기 내부 리스트 ***/
.ui-chatting-memo #load_talk_prev {</p>
<p>}
.ui-chatting-memo #load_talk_prev:before {</p>
<p>}</p>
<p>.ui-chatting-list { position: relative; padding: 15px 0; }
.ui-chatting-list .ch-item { position: relative; padding-left: 75px; margin-bottom: 15px;}
.ui-chatting-list .ch-item .ui-thumb {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 70px;
overflow: hidden;
}
.ui-chatting-list .ch-item .detail { padding: 0; }
.ui-chatting-list .ch-item .info {
position: relative;
text-align: right;
padding: 5px;
}
.ui-chatting-list .ch-item p {
display: inline-block;
padding: 0 5px;
}
.ui-chatting-list .ch-item .text {
min-height: 25px;
margin: 0;
padding: 10px;
line-height: 1.6em;
}</p>
<p>.ui-chatting-list .ch-item.right { padding-left: 0; padding-right: 70px; }
.ui-chatting-list .ch-item.right .ui-thumb { left: auto; right: 0; }
.ui-chatting-list .ch-item.right .info { text-align: left; }
.ui-chatting-list .ch-item.right .detail { opacity: .8; }</p>
<p>.ui-memo-write { position: relative; height: 80px; }
.ui-memo-write .textarea { position: relative; width: 100%; height: 100%; }
.ui-memo-write .textarea textarea { width: 100%; height: 100%; }
.ui-memo-write .win_btn { margin-top: 5px; }</p>
<p>@media all and (max-width: 640px) {
.ui-chatting-list .ch-item { padding: 0 !important; }
.ui-chatting-list .ch-item .ui-thumb { display: none; }
}</p>
<p>
/****************************************************
Search Box
****************************************************/</p>
<p>.searc-sub-box {
position: relative;
clear: both;
padding: 30px 0px;
max-width:500px;
float:right;
}
.searc-sub-box:after{content:"";display:block;clear:both;}
.ui-search-box {
position: relative;
padding-left: 100px;
padding-right: 80px;
margin-top: 5px;
}
.ui-search-box .sch_category {
position: absolute;
top: 0;
left: 0;
width: 95px;
line-height: 30px;
}
.ui-search-box .sch_button {
position: absolute;
top: 0;
right: 0;
width: 75px;
}
.ui-search-box span {
display: block;
padding: 0 15px;
}
.ui-search-box select,
.ui-search-box input[type="text"],
.ui-search-box button { display: block; width: 100%; }</p>
<p>
/****************************************************
Inventory Popup Viewer
****************************************************/</p>
<p>.inven-popup-viewer,
.inven-popup-viewer * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; font-family: 'Dotum'; }</p>
<p>.inven-popup-viewer {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 370px;
margin-left: -150px;
margin-top: -185px;
z-index: 9000;
padding: 25px 40px;
box-sizing: border-box;
}</p>
<p>.inven-item-box { position: relative; margin-right: 25px; padding-left: 25px; border-right-width: 0px; }</p>
<p>.inven_popup_viewer_close { display: none; }
.inven-popup-on .inven_popup_viewer_close { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8900; }
.inven_popup_viewer_close a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; OVERFLOW: hidden; text-indent: -999px; }</p>
<p>.inven-popup-viewer.default-form .inner-content { position: relative; height: 100%; }
.inven-popup-viewer.default-form .inner-content .error { position: absolute; top: left: 0; right: 0; text-align: center; line-height: 100px; font-family: 'Nanum Gothic'; }
.inven-popup-viewer.default-form .inner-content a { }</p>
<p>.inven-popup-viewer.default-form .info { position: relative; text-align: center; padding: 15px 0; }
.inven-popup-viewer.default-form .info .ui-thumb { }
.inven-popup-viewer.default-form .info .ui-thumb img { width: 50px; height: 50px; }</p>
<p>.inven-popup-viewer.default-form .text { position: relative; }
.inven-popup-viewer.default-form .text .title { font-size: 14px; text-align: center; margin-bottom: 10px; padding-bottom: 10px;}
.inven-popup-viewer.default-form .text .title span { display: none; }</p>
<p>.inven-popup-viewer.default-form .text .item-content-box { height: 170px; overflow-y: auto; }
.inven-popup-viewer.default-form .text .item-content-box div { line-height: 1.4em; text-align: center; }
.inven-popup-viewer.default-form .text div.default { }
.inven-popup-viewer.default-form .text div.effect { padding-top: 15px; }
.inven-popup-viewer.default-form .text div.memo { padding-top: 15px; }</p>
<p>.inven-popup-viewer.default-form .control-box { clear: both; position: relative; padding: 10px 0 0; text-align: center; }
.inven-popup-viewer.default-form .control-box li { display: inline-block; }
.inven-popup-viewer.default-form .control-box li a { display: block; }</p>
<p>.inven-popup-viewer.default-form .add-item-form { position: relative; height: 30%; margin-top: 10px; }
.inven-popup-viewer.default-form .add-item-form .item-info { position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .add-item-form .item-info label { display: none; }
.inven-popup-viewer.default-form .add-item-form .item-info span { display: block; font-size: 11px; padding-top: 8px; }
.inven-popup-viewer.default-form .add-item-form input { width: 100%; box-sizing: border-box; }
.inven-popup-viewer.default-form .add-item-form .item-input { position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .add-item-form .ui-style-btn.type4 { position: absolute; right: 87px; bottom: -44px; height: 25px; line-height: 25px; }</p>
<p>.inven-popup-viewer.default-form .send-item-form { position: relative; height: 30%; }
.inven-popup-viewer.default-form .send-item-form input,
.inven-popup-viewer.default-form .send-item-form select { width: 100%; box-sizing: border-box; }
.inven-popup-viewer.default-form .send-item-form input { padding: 0 10px; }
.inven-popup-viewer.default-form .send-item-form .item-input { position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .send-item-form .ui-style-btn.type4 { position: absolute; right: 87px; bottom: -44px; height: 25px; line-height: 25px; }</p>
<p>
#goto_top { position: absolute; right: 10px; bottom: 50px; z-index: 50; /*position:fixed;bottom:50px;right:7%;display:none;width:40px;height:40px;text-align:center;font:40px/45px bold;color:#edd6a2;cursor:pointer; background:white;border-radius:40px;border:1px solid #f2dcaa;z-index:999; */}</p>
<p>@media all and (max-width: 1000px) {
#goto_top { bottom: 50px; }
}</p>
<p>#submenu {
display: block;
position: absolute;
top: 15px;
left: 15px;
width: 140px;
box-sizing: border-box;
padding: 10px 0;
}</p>
<p>#submenu li {
font-size: 13px;
font-weight: 600;
padding: 8px 20px;
}
#subpage {
position: relative;
margin-left: 180px;
padding-top: 10px;
}
#subpage section {
padding-bottom: 50px;
}</p>
<p>@media all and (max-width: 1000px) {
#submenu {
position: relative;
top: auto;
left: auto;
width: auto;
padding: 10px;
text-align: center;
transform: translateY(0) !important;
}
#submenu li {
display: inline-block;
padding: 5px;
font-size: 12px;
}
#subpage { margin-left: 0; }
}</p>
<p>.page-title { font-size: 18px; padding: 10px 0 20px; }
.page-title span { font-size: 14px; opacity: .8; font-weight: 400; }</p>
<p>.sub-title { font-size: 14px; padding: 0 0 10px; } </p>
<p>hr.padding {
display: block;
clear: both;
margin: 0;
padding: 0;
border: none;
height: 30px;
}</p>
<p>
.ui-memo-alram-box,
.ui-call-alram-box {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
text-align: center;
}</p>
<p>
.marquee span {
display: block;
position:relative;
overflow: hidden;
}</p>
<p>.marquee span i:after {
content:"";
white-space:nowrap;
padding-right:50px;
}
.marquee span i {
margin:0;
padding-left:100%;
display:inline-block;
white-space:nowrap;
-webkit-animation-name:marquee;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marquee;
-moz-animation-timing-function:linear;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marquee;
-ms-animation-timing-function:linear;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marquee;
-o-animation-timing-function:linear;
-o-animation-duration:10s;
-o-animation-iteration-count:infinite;
animation-name:marquee;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
from { -ms-transform: translate(0%);}
99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
from { -o-transform: translate(0%);}
99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}</p>
<p>
저 테두리 둘러진 상자 부분을 가운데로 보내려면 어떻게 해야하나요ㅜㅜ? 아무리 찾아봐도 너무 막혀서 질문드립니다..
댓글을 작성하려면 로그인이 필요합니다.
답변 5개
4년 전
해결했습니다^^! head와 tail에 걸쳐서 있던
여기서 봐주시면 될 것 같습니다ㅜㅜ!