쇼핑몰: #122 상품정보 표준화 및 스타일 완료 및 레이아웃 f7f7f7 을 f5f6fa 로 배경색 변경

css/default_shop.css

@@ -39,7 +39,7 @@ a:active {color:#000;text-decoration:underline}
 /* ckeditor 단축키 */
 .cke_sc {margin:0 0 5px;text-align:right}
 .btn_cke_sc{display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc !important;background:#fafafa !important;color:#000 !important;text-decoration:none !important;line-height:1.9em;vertical-align:middle}
-.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;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:after {display:block;visibility:hidden;clear:both;content:""}
 .cke_sc_def dt,
@@ -57,7 +57,7 @@ a:active {color:#000;text-decoration:underline}
 .hd_pops_footer {position:absolute;bottom:0;left:0;padding:10px 0;width:100%;background:#000;color:#fff;text-align:right}
 .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
 
-#hd_nb {border-bottom:1px solid #e9e9e9;background:#f7f7f7;zoom:1}
+#hd_nb {border-bottom:1px solid #e9e9e9;background:#f5f6fa;zoom:1}
 #hd_nb:after {display:block;visibility:hidden;clear:both;content:''}
 #hd_nb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
 #hd_nb ul {margin:0 auto;width:110px}
@@ -68,7 +68,7 @@ a:active {color:#000;text-decoration:underline}
 
 #hd_aside {border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
 #hd_aside h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
-#hd_aside div {position:relative;margin:0 auto;width:998px;border-right:1px solid #e9e9e9;border-left:1px solid #e9e9e9;background:#f7f7f7;zoom:1}
+#hd_aside div {position:relative;margin:0 auto;width:998px;border-right:1px solid #e9e9e9;border-left:1px solid #e9e9e9;background:#f5f6fa;zoom:1}
 #hd_aside div:after {display:block;visibility:hidden;clear:both;content:''}
 
 #sch_all {float:left;background:#fff}
@@ -94,7 +94,7 @@ a:active {color:#000;text-decoration:underline}
 /* 오늘 본 상품 */
 #stv {z-index:1001;float:right;position:relative;width:88px}
 #stv_list {position:fixed !important;position:absolute;width:88px;border:1px solid #e9e9e9;background:#fff}
-#stv_list h2 {padding:10px 0 8px;background:#f7f7f7;text-align:center;letter-spacing:-0.1em}
+#stv_list h2 {padding:10px 0 8px;background:#f5f6fa;text-align:center;letter-spacing:-0.1em}
 #stv_pg {display:block;margin:5px 0 0}
 #stv_list p {padding:20px 0;text-align:center}
 #stv_btn {text-align:center;zoom:1}
@@ -104,7 +104,7 @@ a:active {color:#000;text-decoration:underline}
 .stv_item {display:none;text-align:center}
 .stv_item img {margin:5px 0}
 
-#stv_nb {border-top:1px solid #e9e9e9;background:#f7f7f7}
+#stv_nb {border-top:1px solid #e9e9e9;background:#f5f6fa}
 #stv_nb h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
 #stv_nb ul {margin:0;padding:0;list-style:none}
 #stv_nb li {text-align:center}
@@ -114,7 +114,7 @@ a:active {color:#000;text-decoration:underline}
 #aside {float:left;margin:0 10px 0 0;width:150px}
 
 /* aside:gnb */
-#gnb {margin:0 0 5px;padding:0 0 10px;border:1px solid #d5d5d5;background:#f7f7f7}
+#gnb {margin:0 0 5px;padding:0 0 10px;border:1px solid #d5d5d5;background:#f5f6fa}
 #gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
 .gnb_1dul {margin:0;border:0;background:#fff;list-style:none}
 .gnb_1dli {position:relative;background:url('../img/shop/gnb_bg.gif') top right repeat-x}
@@ -141,7 +141,7 @@ a:active {color:#000;text-decoration:underline}
 #sev_empty {padding:15px 0;text-align:center}
 
 /* aside:커뮤니티 링크 */
-#scomm {margin:0 0 5px;padding:0 0 10px;border:1px solid #d5d5d5;background:#f7f7f7}
+#scomm {margin:0 0 5px;padding:0 0 10px;border:1px solid #d5d5d5;background:#f5f6fa}
 #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 a {display:block;padding:7px 10px 6px;border-bottom:1px solid #f4f4f4;text-decoration:none}
@@ -230,7 +230,7 @@ td.empty_table {padding:85px 0;text-align:center}
 .empty_list {padding:85px 0;text-align:center}
 
 /* 필수입력 */
-.required {background:url('../img/wrest.gif') #f7f7f7 top right no-repeat !important}
+.required {background:url('../img/wrest.gif') #f5f6fa top right no-repeat !important}
 
 /* 폼 테이블 */
 .frm_tbl {margin-bottom:20px;width:100%;border-collapse:collapse;border-spacing:0}
@@ -238,7 +238,7 @@ td.empty_table {padding:85px 0;text-align:center}
 .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 textarea,
-.frm_input {padding:2px 2px 3px;border:1px solid #b8c9c2;background:#f7f7f7;vertical-align:middle}
+.frm_input {padding:2px 2px 3px;border:1px solid #b8c9c2;background:#f5f6fa;vertical-align:middle}
 .frm_input:focus,
 input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important;color:#fff}
 .frm_tbl textarea {width:90%;height:150px}
@@ -332,7 +332,7 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
 .sct_admin {margin:0 0 10px;text-align:right}
 
 /* 상품 목록 현재 위치 */
-#sct_location {margin:0 0 10px;border:1px solid #e9e9e9;background:#f7f7f7;letter-spacing:-4px}
+#sct_location {margin:0 0 10px;border:1px solid #e9e9e9;background:#f5f6fa;letter-spacing:-4px}
 #sct_location a {display:inline-block;padding:10px 10px 8px;text-decoration:none;letter-spacing:0 !important}
 .sct_here {font-weight:bold}
 .sct_bg {padding-right:15px !important;background:url('../img/shop/sct_bg_toright.gif') right 11px no-repeat}
@@ -392,7 +392,7 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
 .sct_11 .sct_li {float:left;margin:0 25px 0 0;width:230px}
 .sct_11 .sct_last {margin:0 !important}
 .sct_11 .sct_clear {clear:both}
-.sct_11 .sct_a {display:block;position:relative;padding:0 0 5px;background:#f7f7f7;text-decoration:none}
+.sct_11 .sct_a {display:block;position:relative;padding:0 0 5px;background:#f5f6fa;text-decoration:none}
 .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 s {display:block}
@@ -406,7 +406,7 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
 .sct_12 .sct_last {margin:0 !important}
 .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_a {display:block;position:relative;padding:20px 10px 20px 240px;width:110px;height:190px;border:1px solid #e9e9e9;background:#f7f7f7;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_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 p {margin:0 0 15px;padding:0;line-height:1.5em}
@@ -421,7 +421,7 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
 .sct_13 .sct_last {}
 .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_a {display:block;position:relative;padding:20px 10px 20px 240px;height:190px;border:1px solid #e9e9e9;background:#f7f7f7;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_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 p {margin:0 0 15px;padding:0;line-height:1.5em}
@@ -439,6 +439,11 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
 #sit {margin:10px 0;border:1px solid #e9e9e9}
 .sit_admin {text-align:right}
 
+/* 상품 상세보기 - 공통 */
+.sit_anchor {margin:0;padding:0;list-style:none;zoom:1}
+.sit_anchor:after {display:block;visibility:hidden;clear:both;content:''}
+.sit_anchor li {float:left;position:relative;margin:0 0 0 -1px;border:1px solid #ddd}
+
 /* 상품 상세보기 - 개요 */
 #sit_ov_wrap {margin:0 0 20px;border-bottom:1px solid #e9e9e9;zoom:1}
 #sit_ov_wrap:after {display:block;visibility:hidden;clear:both;content:''}
@@ -495,6 +500,18 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
 /* 상품 상세보기 - 다른 상품 보기 */
 #sit_siblings {}
 
+/* 상품 상세보기 - 상품정보 */
+#sit_inf {padding:10px}
+#sit_inf h2,
+#sit_inf h3 {position:absolute;font-size:0;line-height:0;content:''}
+
+#sit_inf_basic {margin:0 0 10px}
+#sit_inf_explan {margin:0 0 10px}
+
+#sit_inf_open {width:100%;border:0;border-collapse:collapse}
+#sit_inf_open th {padding:7px 10px;border:1px solid #fff;background:#f5f6fa;text-align:left}
+#sit_inf_open td {padding:7px 10px;border:1px solid #fff;background:#f5f6fa}
+
 /* 공지사항 및 커뮤니티 새글 */
 #sidx_lat {padding:15px 0 0;border-top:1px solid #ddd}
 #sidx_lat h2 {text-align:center}
@@ -519,20 +536,20 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
 #sfaq_wrap h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
 #sfaq_wrap ol {margin:0;padding:0;list-style:none}
 #sfaq_list {margin:0 0 10px;border:1px solid #ccc}
-#sfaq_list li {border-bottom:1px solid #fff;background:#f7f7f7}
+#sfaq_list li {border-bottom:1px solid #fff;background:#f5f6fa}
 #sfaq_list a {display:block;padding:10px;font-weight:bold;text-decoration:none}
 #sfaq_list a:focus,
 #sfaq_list a:hover {background:#626870;color:#fff}
 #sfaq_con {border:1px solid #e9e9e9;border-top:0}
 #sfaq_con li {padding:0 0 10px}
-#sfaq_con h3 {padding:10px;background:#f7f7f7;border-top:1px solid #e9e9e9}
+#sfaq_con h3 {padding:10px;background:#f5f6fa;border-top:1px solid #e9e9e9}
 #sfaq_con p {padding:10px}
 .sfaq_tolist {padding:0 10px;text-align:right}
 .sfaq_admin {text-align:right}
 .sfaq_img {text-align:center}
 
 /* 상품검색 */
-#ssch_ov {margin:0 0 10px;padding:15px 0;border:1px solid #e9e9e9;background:#f7f7f7;text-align:center}
+#ssch_ov {margin:0 0 10px;padding:15px 0;border:1px solid #e9e9e9;background:#f5f6fa;text-align:center}
 #ssch caption {padding:0 0 5px;font-size:1em;font-weight:bold;text-align:left;line-height:1.5em}
 .ssch_it_img {width:100px;text-align:center}
 .ssch_it_img img {width:100px;height:100px}

shop/item.php

@@ -384,22 +384,40 @@ else
     }
     </script>
 
-    <!-- 상품설명 -->
-    <div id="item_explan">
+    <section id="sit_inf">
+        <h2>상품 정보</h2>
+
+        <?php if ($it['it_basic']) { // 상품 기본설명 ?>
+        <div id="sit_inf_basic">
+             <?php echo $it['it_basic']; ?>
+        </div>
+        <?php } ?>
+
+        <?php if ($it['it_explan']) { // 상품 상세설명 ?>
+        <div id="sit_inf_explan">
+            <?php echo conv_content($it['it_explan'], 1); ?>
+        </div>
+        <?php } ?>
+
+        <h3>상품 정보 고시</h3>
         <?php
         $sql = " select * from {$g4['shop_item_info_table']} where it_id = '$it_id' order by ii_id ";
         $result = sql_query($sql, false);
         if (@mysql_num_rows($result)) {
         ?>
         <!-- 상품정보고시 -->
-        <table class="item_info_open">
+        <table id="sit_inf_open">
+        <colgroup>
+            <col class="grid_4">
+            <col>
+        </colgroup>
         <tbody>
         <?php
         for ($i=0; $row=sql_fetch_array($result); $i++) {
         ?>
         <tr valign="top">
-            <th scope="row" style="padding:8px 15px;width:30%;border-bottom:1px solid #f6dbab;background:#f8f4ee;font-size:12px;text-align:left"><?php echo $row['ii_title']; ?></th>
-            <td style="padding:8px 15px;border-bottom:1px solid #f6dbab"><?php echo $row['ii_value']; ?></th>
+            <th scope="row"><?php echo $row['ii_title']; ?></th>
+            <td><?php echo $row['ii_value']; ?></th>
         </tr>
         <?php } //for?>
         </tbody>
@@ -407,14 +425,6 @@ else
         <!-- 상품정보고시 end -->
         <?php } //if?>
 
-        <table width=100% cellspacing=0 border=0>
-        <?php if ($it['it_basic']) { ?>
-        <?php echo $it['it_basic']; ?>
-        <?php } ?>
-
-        <?php if ($it['it_explan']) { ?>
-        <div id='div_explan'><?php echo conv_content($it['it_explan'], 1); ?></div>
-        <?php } ?>
     </div>
     <!-- 상품설명 end -->