쇼핑몰: #233 사용후기 마크업 및 스타일

This commit is contained in:
whitedot
2013-06-17 11:21:04 +09:00
parent 97d9e2e097
commit c042e9b77e
4 changed files with 140 additions and 139 deletions

View File

@ -13,20 +13,15 @@ button {border-radius:0;font-size:1em;font-family:"dotum"}
p {margin:0;padding:10px 0;line-height:1.7em;word-break:break-all} p {margin:0;padding:10px 0;line-height:1.7em;word-break:break-all}
hr {display:none} hr {display:none}
pre {overflow-x:scroll;font-size:1.1em} pre {overflow-x:scroll;font-size:1.1em}
a:link, a:link, a:visited {color:#000;text-decoration:none}
a:visited {color:#000;text-decoration:none} a:hover, a:focus, a:active {color:#000;text-decoration:underline}
a:hover,
a:focus,
a:active {color:#000;text-decoration:underline}
/* 화면낭독기 사용자용 */ /* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden} #hd_login_msg {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden}
.msg_sound_only, .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
/* 본문 바로가기 */ /* 본문 바로가기 */
#to_content a {z-index:100000;position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} #to_content a {z-index:100000;position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
#to_content a:focus, #to_content a:focus, #to_content a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}
#to_content a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}
/* 이미지 등비율 리사이징 */ /* 이미지 등비율 리사이징 */
.img_fix {width:100%;height:auto} .img_fix {width:100%;height:auto}
@ -42,8 +37,7 @@ a:active {color:#000;text-decoration:underline}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f5f6fa;text-align:center} .cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f5f6fa;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1} .cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""} .cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid .e9e9e9}
.cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid .e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold} .cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%} .cke_sc_def dd {width:30%}
@ -131,8 +125,7 @@ a:active {color:#000;text-decoration:underline}
#sev ul {margin:0;padding:0;border:0;background:#fff;list-style:none} #sev ul {margin:0;padding:0;border:0;background:#fff;list-style:none}
#sev .sev_img {display:block;border-bottom:1px solid #faedf2} #sev .sev_img {display:block;border-bottom:1px solid #faedf2}
#sev .sev_text {display:block;padding:7px 10px 6px;border-bottom:1px solid #faedf2;text-decoration:none} #sev .sev_text {display:block;padding:7px 10px 6px;border-bottom:1px solid #faedf2;text-decoration:none}
#sev .sev_text:focus, #sev .sev_text:focus, #sev .sev_text:hover {background:#fffafc}
#sev .sev_text:hover {background:#fffafc}
#sev strong {} #sev strong {}
#sev_empty {padding:15px 0;text-align:center} #sev_empty {padding:15px 0;text-align:center}
@ -141,8 +134,7 @@ a:active {color:#000;text-decoration:underline}
#scomm h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #scomm h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#scomm ul {margin:0;padding:0;border:0;background:#fff;list-style:none} #scomm ul {margin:0;padding:0;border:0;background:#fff;list-style:none}
#scomm a {display:block;padding:7px 10px 6px;border-bottom:1px solid #f4f4f4;text-decoration:none} #scomm a {display:block;padding:7px 10px 6px;border-bottom:1px solid #f4f4f4;text-decoration:none}
#scomm a:focus, #scomm a:focus, #scomm a:hover {background:#f9f9f9}
#scomm a:hover {background:#f9f9f9}
#scomm_empty {padding:15px 0;text-align:center} #scomm_empty {padding:15px 0;text-align:center}
/* asdie:배너 */ /* asdie:배너 */
@ -163,8 +155,7 @@ a:active {color:#000;text-decoration:underline}
.sanchor:after {display:block;visibility:hidden;clear:both;content:""} .sanchor:after {display:block;visibility:hidden;clear:both;content:""}
.sanchor li {float:left;margin-left:-1px;list-style:none} .sanchor li {float:left;margin-left:-1px;list-style:none}
.sanchor a {display:inline-block;border:1px solid #e9e9e9;background:#f5f6fa;padding:0 7px;height:30px;text-decoration:none;line-height:2.6em} .sanchor a {display:inline-block;border:1px solid #e9e9e9;background:#f5f6fa;padding:0 7px;height:30px;text-decoration:none;line-height:2.6em}
.sanchor a:focus, .sanchor a:focus, .sanchor a:hover {background:#626870;color:#fff;text-decoration:none}
.sanchor a:hover {background:#626870;color:#fff;text-decoration:none}
a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none} a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
/* 하단 레이아웃 */ /* 하단 레이아웃 */
@ -241,10 +232,8 @@ td.empty_table {padding:85px 0;text-align:center}
.frm_tbl caption {padding:10px 0;color:#4b8b99;font-weight:bold;text-align:left} .frm_tbl caption {padding:10px 0;color:#4b8b99;font-weight:bold;text-align:left}
.frm_tbl th {padding-left:10px;width:100px;border-top:1px solid #eee;border-bottom:1px solid #eee;font-weight:normal;text-align:left} .frm_tbl th {padding-left:10px;width:100px;border-top:1px solid #eee;border-bottom:1px solid #eee;font-weight:normal;text-align:left}
.frm_tbl td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent} .frm_tbl td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.frm_tbl textarea, .frm_tbl textarea, .frm_input {padding:2px 2px 3px;border:1px solid #b8c9c2;background:#f5f6fa;vertical-align:middle}
.frm_input {padding:2px 2px 3px;border:1px solid #b8c9c2;background:#f5f6fa;vertical-align:middle} .frm_input:focus, input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;color:#fff}
.frm_input:focus,
input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;color:#fff}
.frm_tbl textarea {width:90%;height:150px} .frm_tbl textarea {width:90%;height:150px}
.frm_address {display:block;margin-top:5px} .frm_address {display:block;margin-top:5px}
.frm_file {display:block;margin-bottom:5px} .frm_file {display:block;margin-bottom:5px}
@ -378,8 +367,7 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
.sct_10 .sct_last {margin:0 !important} .sct_10 .sct_last {margin:0 !important}
.sct_10 .sct_clear {clear:both} .sct_10 .sct_clear {clear:both}
.sct_10 .sct_a {display:block;position:relative;text-decoration:none} .sct_10 .sct_a {display:block;position:relative;text-decoration:none}
.sct_10 .sct_a:focus, .sct_10 .sct_a:focus, .sct_10 .sct_a:hover {text-decoration:none}
.sct_10 .sct_a:hover {text-decoration:none}
.sct_10 .sct_img {display:block;margin:0 0 15px} .sct_10 .sct_img {display:block;margin:0 0 15px}
.sct_10 b {display:block;margin:0 0 8px;font-weight:normal} .sct_10 b {display:block;margin:0 0 8px;font-weight:normal}
.sct_10 s {display:block} .sct_10 s {display:block}
@ -393,8 +381,7 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
.sct_11 .sct_last {margin:0 !important} .sct_11 .sct_last {margin:0 !important}
.sct_11 .sct_clear {clear:both} .sct_11 .sct_clear {clear:both}
.sct_11 .sct_a {display:block;position:relative;padding:0 0 5px;background:#f5f6fa;text-decoration:none} .sct_11 .sct_a {display:block;position:relative;padding:0 0 5px;background:#f5f6fa;text-decoration:none}
.sct_11 .sct_a:focus, .sct_11 .sct_a:focus, .sct_11 .sct_a:hover {text-decoration:none}
.sct_11 .sct_a:hover {text-decoration:none}
.sct_11 .sct_img {display:block;margin:0 0 15px} .sct_11 .sct_img {display:block;margin:0 0 15px}
.sct_11 b {display:block;margin:0 0 8px;padding:0 5px;font-weight:normal} .sct_11 b {display:block;margin:0 0 8px;padding:0 5px;font-weight:normal}
.sct_11 s {display:block} .sct_11 s {display:block}
@ -409,8 +396,7 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
.sct_12 .sct_clear {clear:both} .sct_12 .sct_clear {clear:both}
.sct_12 .sct_arw_toleft {display:block;z-index:2;position:absolute;top:20px;left:221px;width:10px;height:19px;background:url('../img/shop/icon_arw_toleft.gif') no-repeat} .sct_12 .sct_arw_toleft {display:block;z-index:2;position:absolute;top:20px;left:221px;width:10px;height:19px;background:url('../img/shop/icon_arw_toleft.gif') no-repeat}
.sct_12 .sct_a {display:block;position:relative;padding:20px 10px 20px 240px;width:110px;height:190px;border:1px solid #e9e9e9;background:#f5f6fa;text-decoration:none} .sct_12 .sct_a {display:block;position:relative;padding:20px 10px 20px 240px;width:110px;height:190px;border:1px solid #e9e9e9;background:#f5f6fa;text-decoration:none}
.sct_12 .sct_a:focus, .sct_12 .sct_a:focus, .sct_12 .sct_a:hover {text-decoration:none}
.sct_12 .sct_a:hover {text-decoration:none}
.sct_12 .sct_img {position:absolute;top:0;left:0} .sct_12 .sct_img {position:absolute;top:0;left:0}
.sct_12 b {display:block;margin:0 0 15px;font-size:1.2em;letter-spacing:-0.1em} .sct_12 b {display:block;margin:0 0 15px;font-size:1.2em;letter-spacing:-0.1em}
.sct_12 p {margin:0 0 15px;padding:0;line-height:1.5em} .sct_12 p {margin:0 0 15px;padding:0;line-height:1.5em}
@ -426,8 +412,7 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
.sct_13 .sct_clear {clear:both} .sct_13 .sct_clear {clear:both}
.sct_13 .sct_arw_toleft {display:block;z-index:2;position:absolute;top:20px;left:221px;width:10px;height:19px;background:url('../img/shop/icon_arw_toleft.gif') no-repeat} .sct_13 .sct_arw_toleft {display:block;z-index:2;position:absolute;top:20px;left:221px;width:10px;height:19px;background:url('../img/shop/icon_arw_toleft.gif') no-repeat}
.sct_13 .sct_a {display:block;position:relative;padding:20px 10px 20px 240px;height:190px;border:1px solid #e9e9e9;background:#f5f6fa;text-decoration:none} .sct_13 .sct_a {display:block;position:relative;padding:20px 10px 20px 240px;height:190px;border:1px solid #e9e9e9;background:#f5f6fa;text-decoration:none}
.sct_13 .sct_a:focus, .sct_13 .sct_a:focus, .sct_13 .sct_a:hover {text-decoration:none}
.sct_13 .sct_a:hover {text-decoration:none}
.sct_13 .sct_img {position:absolute;top:0;left:0} .sct_13 .sct_img {position:absolute;top:0;left:0}
.sct_13 b {display:block;margin:0 0 15px;font-size:1.2em;letter-spacing:-0.1em} .sct_13 b {display:block;margin:0 0 15px;font-size:1.2em;letter-spacing:-0.1em}
.sct_13 p {margin:0 0 15px;padding:0;line-height:1.5em} .sct_13 p {margin:0 0 15px;padding:0;line-height:1.5em}
@ -509,8 +494,7 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
#sit_ov_btn li {float:left;margin:0 0 0 1px} #sit_ov_btn li {float:left;margin:0 0 0 1px}
#sit_ov_btn a {display:inline-block;padding:10px 0 8px;width:80px;font-size:0.95em;text-align:center;text-decoration:none;letter-spacing:-0.1em} #sit_ov_btn a {display:inline-block;padding:10px 0 8px;width:80px;font-size:0.95em;text-align:center;text-decoration:none;letter-spacing:-0.1em}
#sit_btn_buy {background:#ff5b89;color:#fff} #sit_btn_buy {background:#ff5b89;color:#fff}
#sit_btn_cart, #sit_btn_cart, #sit_btn_wish {background:#555;color:#fff}
#sit_btn_wish {background:#555;color:#fff}
#sit_btn_rec {background:#888;color:#fff} #sit_btn_rec {background:#888;color:#fff}
/* 상품 상세보기 - 다른 상품 보기 */ /* 상품 상세보기 - 다른 상품 보기 */
@ -533,9 +517,30 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
/* 상품 상세보기 - 사용후기 */ /* 상품 상세보기 - 사용후기 */
#sit_use {margin:0 0 10px;padding:10px 10px 20px;border-bottom:1px solid #e9e9e9} #sit_use {margin:0 0 10px;padding:10px 10px 20px;border-bottom:1px solid #e9e9e9}
#sit_use h2 {margin:0 0 10px} #sit_use h2 {margin:0 0 10px}
.sit_use_btn {text-align:right} #sit_use h3 {margin:0 0 10px}
#sit_use_tbl .td_star {width:100px !important;text-align:center !important} #sit_use_ol {margin:0 0 5px;padding:0;border-top:1px solid #e9e9e9;list-style:none}
.sit_use_li {position:relative;padding:0 0 10px;border-bottom:1px solid #e9e9e9;background:#f5f6fa}
.sit_use_li_title {display:block;margin:0;padding:10px;width:100%;border:0;background:transparent;text-align:left;cursor:pointer}
.sit_use_dl {margin:0;padding:0 10px;zoom:1}
.sit_use_dl:after {display:block;visibility:hidden;clear:both;content:""}
.sit_use_dl dt {float:left;margin:2px 0 0}
.sit_use_dl dd {float:left;margin:2px 20px 0 5px}
.sit_use_star {margin:0 !important;padding:0 0 0 5px}
.sit_use_con {display:none;padding:10px 10px 0}
.sit_use_con p {padding:0}
.sit_use_qaq {margin:0 0 5px}
.sit_use_con textarea {display:none}
.sit_use_cmd {text-align:right}
.sit_use_pw {display:none;position:absolute;top:30px;left:175px;padding:10px;width:348px;border:1px solid #000;background:#fff;text-align:center}
.sit_use_pw span {display:block;margin:0 0 5px}
#sit_use_wbtn {margin:0 0 5px;text-align:right}
#sit_use_w {display:none}
/* 상품 상세보기 - 상품문의 */ /* 상품 상세보기 - 상품문의 */
#sit_qa {margin:0 0 10px;padding:10px 10px 20px;border-bottom:1px solid #e9e9e9} #sit_qa {margin:0 0 10px;padding:10px 10px 20px;border-bottom:1px solid #e9e9e9}

View File

@ -603,7 +603,6 @@ else
?> ?>
</section> </section>
<?php if ($default['de_baesong_content']) { // 배송정보 내용이 있다면 ?> <?php if ($default['de_baesong_content']) { // 배송정보 내용이 있다면 ?>
<section id="sit_dvr"> <section id="sit_dvr">
<h2>배송정보</h2> <h2>배송정보</h2>

View File

@ -10,17 +10,9 @@ $itemuse_list = "./itemuselist.php";
include_once(G4_PATH.'/head.sub.php'); include_once(G4_PATH.'/head.sub.php');
?> ?>
<table id="sit_use_tbl" class="basic_tbl"> <section id="sit_use_list">
<thead> <h3>등록된 사용후기</h3>
<tr>
<th scope="col">번호</th>
<th scope="col">제목</th>
<th scope="col">작성자</th>
<th scope="col">작성일</th>
<th scope="col">평점</th>
</tr>
</thead>
<tbody>
<?php <?php
/* /*
여분필드 용도 여분필드 용도
@ -57,30 +49,35 @@ for ($i=0; $row=sql_fetch_array($result); $i++)
$is_href = './itemuselist.php?bo_table=itemuse&amp;wr_id='.$row['wr_id']; $is_href = './itemuselist.php?bo_table=itemuse&amp;wr_id='.$row['wr_id'];
// http://stackoverflow.com/questions/6967081/show-hide-multiple-divs-with-jquery?answertab=votes#tab-top // http://stackoverflow.com/questions/6967081/show-hide-multiple-divs-with-jquery?answertab=votes#tab-top
if ($i == 0) echo '<ol id="sit_use_ol">';
?> ?>
<tr> <li class="sit_use_li">
<td class="td_num"><?php echo $is_num; ?><span class="sound_only">번</span></td> <button type="button" class="sit_use_li_title" onclick="javascript:qa_menu('sit_use_con_<?php echo $i; ?>')"><b><?php echo $is_num; ?>.</b> <?php echo $is_subject; ?></button>
<td> <dl class="sit_use_dl">
<a href="#sit_use" class="use_href" onclick="return false;" target="<?php echo $i; ?>"><?php echo $is_subject; ?></a> <dt>작성자</dt>
<div id="use_div<?php echo $i; ?>" class="use_div" style="display:none;"> <dd><?php echo $is_name; ?></dd>
<?php echo $is_content; ?> <dt>작성일</dt>
<dd><?php echo $is_time; ?></dd>
<dt>선호도<dt>
<dd class="sit_use_star"><img src="<?php echo G4_URL; ?>/img/shop/s_star<?php echo $is_star; ?>.png" alt="별<?php echo $is_star; ?>개"></dd>
</dl>
<div id="sit_use_con_<?php echo $i; ?>" class="sit_use_con">
<p>
<?php echo $is_content; // 사용후기 내용 ?>
</p>
</div> </div>
</td> </li>
<td><?php echo $is_name; ?></td>
<td><?php echo $is_time; ?></td>
<td><img src="<?php echo G4_URL; ?>/img/shop/s_star<?php echo $is_star; ?>.png" alt="별<?php echo $is_star; ?>개"></td>
</tr>
<?php <?php }
}
if (!$i) { if ($i >= 0) echo '</ol>';
echo '<tr><td colspan="5" class="empty_table">등록된 사용후기가 없습니다.</td></tr>';
} if (!$i) echo '<p class="sit_empty">사용후기가 없습니다.</p>';
?> ?>
</tbody> </section>
</table>
<?php <?php
// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL // 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
@ -124,7 +121,7 @@ function itemuse_page($write_pages, $cur_page, $total_page, $url, $add="")
echo itemuse_page(10, $page, $total_page, "./itemuse.php?it_id=$it_id&amp;page=", ""); echo itemuse_page(10, $page, $total_page, "./itemuse.php?it_id=$it_id&amp;page=", "");
?> ?>
<div class="sit_use_btn"> <div id="sit_use_wbtn">
<!-- <a href="javascript:itemusewin('it_id=<?php echo $it_id; ?>');">사용후기 쓰기<span class="sound_only"> 새 창</span></a> --> <!-- <a href="javascript:itemusewin('it_id=<?php echo $it_id; ?>');">사용후기 쓰기<span class="sound_only"> 새 창</span></a> -->
<a href="<?php echo $itemuse_form; ?>" id="itemuse_form" onclick="return false;" class="btn02">사용후기 쓰기<span class="sound_only"> 새 창</span></a> <a href="<?php echo $itemuse_form; ?>" id="itemuse_form" onclick="return false;" class="btn02">사용후기 쓰기<span class="sound_only"> 새 창</span></a>
<a href="<?php echo $itemuse_list; ?>" id="itemuse_list" class="btn01">더보기</a> <a href="<?php echo $itemuse_list; ?>" id="itemuse_list" class="btn01">더보기</a>