Document

개별디자인 소스 변경

개별디자인에서 코드 하이라이트 기능을 사용하여, 변경된 내용을 참고해서 작업해주시기 바랍니다.

PC 개별디자인 (D4) - HTML 수정 전

수정 경로 = 중앙디자인 > 주문관련 > 고급형 주문서 작성 : HTML

<h3>주문자 동의</h3> <div class="tbl-order"> <table> <caption>주문자 동의</caption> <colgroup> <col style="width: 130px"> <col /> </colgroup> <tbody>  <tr> <th scope="row"><div class="txt-l">청약철회 방침</div></th> <td>  <br /> <label class="label w120"> 동의합니다.</label> <label class="label"> 동의하지 않습니다.</label> </td> </tr>    <tr> <th scope="row"><div class="txt-l">약관동의</div></th> <td> <div id="chkwrap">   </div> </td> </tr>  <tr> <th scope="row"><div class="txt-l">약관동의</div></th> <td>  <div class="new-privercy-contract">  </div>   <div class="new-privercy-contract"> <p>개인정보 수집에 대한 동의</p> <div class="privercy-contract-tap"> <ul> <li class="sel"><a href="#none">수집하는 개인정보 항목</a></li> <li><a href="#none">개인정보의 수집 이용목적</a></li> <li class="end"><a href="#none">개인정보의 보유 및 이용기간</a></li> </ul> </div> <div class="tab-content"> <div class="privercy-contract"></div> <div class="privercy-contract" style="display: none;"></div> <div class="privercy-contract" style="display: none;"></div> </div> <div class="privercy-agree"> <label> 정보수집에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div>  <p>개인정보의 제3자 제공</p> <div class="privercy-contract"></div> <div class="privercy-agree"> <label> 제3자 제공에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div>   <p>개인정보 처리위탁안내</p> <div class="privercy-contract"></div> <div class="privercy-agree"> <label> 처리위탁에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div>  </div>  <div class="new-privercy-contract"> <p>개인정보 수집에 대한 동의</p> <div class="privercy-contract"></div> <div class="privercy-agree"> <label> 약관에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div> </div>   </td> </tr>   <tr> <th scope="row"><div class="txt-l">주문동의</div></th> <td> <label class="label"> 상기 결제정보를 확인하였으며, 구매진행에 동의합니다.</label> </td> </tr> </tbody> </table> </div>

PC 개별디자인 (D4) - HTML 수정 후

수정 경로 = 중앙디자인 > 주문관련 > 고급형 주문서 작성 : HTML

<h3>주문자 동의</h3> <div class="tbl-order policy"> <table> <caption>주문자 동의</caption> <colgroup> <col style="width: 130px"> <col /> </colgroup> <tbody>  <tr> <th scope="row"><div class="txt-l">청약철회 방침</div></th> <td>  <br /> </td> </tr>    <tr> <th scope="row"><div class="txt-l">이용 약관</div></th> <td> <div id="chkwrap">   </div> </td> </tr>  <tr> <th scope="row"><div class="txt-l">이용 약관</div></th> <td> <div class="new-privercy-contract"> <div class="privercy-contract"> <textarea cols="80" wrap="virtual" rows="10" readonly ></textarea> </div> </div>    <div class="new-privercy-contract"> <p>개인정보 수집에 대한 동의</p> <div class="privercy-contract-tap"> <ul> <li class="sel"><a href="#none">수집하는 개인정보 항목</a></li> <li><a href="#none">개인정보의 수집 이용목적</a></li> <li class="end"><a href="#none">개인정보의 보유 및 이용기간</a></li> </ul> </div> <div class="tab-content"> <div class="privercy-contract"></div> <div class="privercy-contract" style="display: none;"></div> <div class="privercy-contract" style="display: none;"></div> </div> <div class="privercy-agree"> <label> 정보수집에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div>  <p>개인정보의 제3자 제공</p> <div class="privercy-contract"></div> <div class="privercy-agree"> <label> 제3자 제공에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div>   <p>개인정보 처리위탁안내</p> <div class="privercy-contract"></div> <div class="privercy-agree"> <label> 처리위탁에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div>  </div>  <div class="new-privercy-contract"> <p>개인정보 수집에 대한 동의</p> <div class="privercy-contract"></div> <div class="privercy-agree"> <label> 약관에 동의합니다.</label> <label> 동의하지 않습니다.</label> </div> </div>   </td> </tr>    <tr> <th scope="row"><div class="txt-l">개인정보 공급자<br/>제공 동의</div></th> <td>  <br /> </td> </tr>  <tr> <th scope="row"><div class="txt-l">개인정보 수집·이용</div></th> <td>  <div class="new-privercy-contract">  </div>  </td> </tr> <tr> <th scope="row"><div class="txt-l">주문동의</div></th> <td> <label class="label"></label><br /> <label class="label"> <span class="txt">상기 약관 및 개인정보 수집 · 이용에 대한동의 내용과 결제정보를 확인하였으므로 구매진행에 동의합니다.</span> </label> </td> </tr> </tbody> </table> </div>

PC 개별디자인 (D4) - CSS 추가

수정 경로 = 중앙디자인 > 주문관련 > 고급형 주문서 작성 : CSS

* 베이직 심플 디자인용 CSS

* 모던 심플 디자인용 CSS (click)

/* s 약관동의 */ #order .policy { border: 1px solid #ccc; margin-bottom: -1px; } #order .policy .new-privercy-contract > p { display: none; } #order .policy.tbl-order thead th { height: 32px; line-height: 32px; padding: 0; font-weight: normal; color: #777; font-size: 11px; } #order .policy.tbl-order tbody th { background: #f8f8f8; } #order .policy.tbl-order tbody td { padding: 16px; } #order .policy.tbl-order tbody tr.last th, #order .policy.tbl-order tbody tr.last td { border-bottom: 0; } #order .policy .privercy-contract textarea { width: 894px; height: 100%; resize: none; } #order .policy .tbl-order .privercy-contract tbody td { padding: 5px 16px; color: #777; font-size: 11px; } #order .policy .tbl-order .privercy-agree { display: none; } /* e 약관동의 */ /* s 비회원 이용약관 */ #order .new-privercy-contract .privercy-contract textarea { box-sizing: border-box; width: 100%; height: 100%; } /* e 비회원 이용약관 */

* 모던 심플 디자인에 최적화된 CSS입니다.