디자인 관리

[업데이트] 아이디 비밀번호 찾기 인증
[스킨 작업안내]

■ PC 쇼핑몰

- 위치 : 관리자 > 디자인 > HTML 편집 > 페이지 편집 내 회원관련 > 아이디 비밀번호 찾기 인증
* 스타일시트의 경우 관리자 > 디자인 > HTML 편집 > 스타일 시트 편집 페이지를 통해 관리할 수 있습니다.

(샘플소스)

<style type="text/css" title="">
.pop_find_id {position:fixed; left:50%; top:100px; z-index:1001; width:400px; border:1px solid #dcdcdc; margin-left:-200px; background-color:#fff;}
.pop_find_id h1 {height:49px; padding:0 10px; background-color:#676767; color:#fff; font-size:16px; font-weight:normal; line-height:49px;}
.pop_find_id > .box {padding:30px;}
.pop_find_id > .box > h2 {color:#333; font-size:20px; font-weight:normal;}
.pop_find_id > .box > .msg {padding-top:15px;}
.pop_find_id > .box > .input {position:relative; height:50px; margin-top:15px; padding-right:113px; background-color:#f5f5f5;}
.pop_find_id > .box > .input:after {position:absolute; right:113px; top:50%; width:1px; height:22px; margin-top:-11px; background-color:#dbdbdb; content:'';}
.pop_find_id > .box > .input > .input_number {width:100%; height:50px; padding:0 10px; border:0; background-color:transparent;}
.pop_find_id > .box > .input > .btn {position:absolute; right:0; top:0; width:113px; height:50px; border:0; background-color:#f5f5f5; font-weight:bold; cursor:pointer;}
.pop_find_id > .box > .form_input {height:50px; margin-top:10px;}
.pop_find_id > .box > .box_btn {margin-top:20px;}
.pop_find_id > .box > .pop_id_list {padding-top:25px;}
.pop_find_id > .box > .pop_id_list .list {overflow:auto; max-height:100px; margin-top:10px; padding:5px 0; border:1px solid #d2d2d2; border-width:1px 0; background-color:#f5f5f5;}
.pop_find_id > .box > .pop_id_list .list li {position:relative; padding:5px; text-align:left;}
.pop_find_id > .box > .pop_id_list .btn {padding-top:20px; text-align:center;}
.pop_find_id > .box > .close {display:inline-block; position:absolute; right:14px; top:14px; width:21px; height:21px; background:url('{{$이미지경로}}/button/hd_close.png') no-repeat center; text-indent:-9999px; cursor:pointer;}
</style>

<div id="search_id_pwd">
  {{$찾기폼시작}}
  <div id="pop_find_id" class="pop_find_id">
    <h1>{{$아이디비밀번호찾기구분}}</h1>
    <div class="box">
      <h2>인증번호 입력</h2>
      <p class="msg">회원정보에 등록한 {{$아이디비밀번호찾기조건}}와 입력한 {{$아이디비밀번호찾기조건}}가 일치해야 인증번호를 받을 수 있습니다.</p>
      <div class="input">
        <input type="text" id="search_val" name="search_val" value="{{$인증내용}}" class="input_number" readOnly>
        <input type="button" id="btn_confirm" name="btn_confirm" value="인증번호발송" onclick="confirm_send();" class="btn">
      </div>
      <input type="text" id="reg_code" name="reg_code" value="{{$인증번호}}" class="form_input block" placeholder="인증번호 입력">
      <span class="box_btn block large white"><input type="submit" value="확인"></span>
      <div id="limit_5" style="display:none;">발송된 인증번호의 유효시간은 5분입니다.</div>
      {{$아이디리스트}}
      <a onclick="toggle_view('pop_find_id');removeDimmed();" class="close">닫기</a>
    </div>
  </div>
  {{$폼끝}}
</div>

- {{$아이디리스트}} 페이지 코드 편집하기

(샘플소스)

- 리스트 상단 (TABLE 선언 등 반복 구문의 상단 부분)
<div id="pop_id_list" class="pop_id_list">
  <h2>고객님의 정보와 일치하는 아이디 목록입니다.</h2>
  <ul class="list">

- 리스트 반복 구문 (상품 목록 또는 게시물 목록 등 반복 구문)
    <li><label><input type="radio" name="member_no" value="{{$회원번호}}"> {{$아이디}} (가입일 : {{$가입일}})</label></li>

- 리스트 하단 (반복 구문의 하단 부분)
  </ul>
  <div class="btn">
      <span class="box_btn w150 large"><a href="/member/login.php">로그인하기</a></span>
      <span class="box_btn w150 large white"><a onclick="chkSearchpwd();">비밀번호 변경</a></span>
    </div>
</div>

■ 모바일 쇼핑몰

- 위치 : 위치 : 관리자 > 디자인 > HTML 편집 > 페이지 편집 내 회원관련 > 아이디 비밀번호 찾기 인증
* 스타일시트의 경우 관리자 > 디자인 > HTML 편집 > 스타일 시트 편집 페이지를 통해 관리할 수 있습니다.

(샘플소스)

<style>
.pop_find_id {position:fixed; left:50%; top:100px; z-index:1001; width:98%; border:1px solid #dcdcdc; margin-left:-49%; background-color:#fff;}
.pop_find_id h1 {height:49px; padding:0 10px; background-color:#676767; color:#fff; font-size:16px; font-weight:normal; line-height:49px;}
.pop_find_id > .box {padding:15px;}
.pop_find_id > .box > h2 {color:#333; font-size:20px; font-weight:normal;}
.pop_find_id > .box > .msg {padding-top:15px;}
.pop_find_id > .box > .input {position:relative; height:50px; margin-top:15px; padding-right:113px; background-color:#f5f5f5;}
.pop_find_id > .box > .input:after {position:absolute; right:113px; top:50%; width:1px; height:22px; margin-top:-11px; background-color:#dbdbdb; content:'';}
.pop_find_id > .box > .input > .input_number {width:100%; height:50px; padding:0 10px; border:0; background-color:transparent;}
.pop_find_id > .box > .input > .btn {position:absolute; right:0; top:0; width:113px; height:50px; border:0; background-color:#f5f5f5; font-weight:bold; cursor:pointer;}
.pop_find_id > .box > .form_input {height:50px; margin-top:5px;}
.pop_find_id > .box > .box_btn {margin-top:10px;}
.pop_find_id > .box > .pop_id_list {padding-top:15px;}
.pop_find_id > .box > .pop_id_list .list {overflow:auto; max-height:100px; margin-top:15px; padding:5px 0; border:1px solid #d2d2d2; border-width:1px 0; background-color:#f5f5f5;}
.pop_find_id > .box > .pop_id_list .list li {position:relative; padding:5px; text-align:left;}
.pop_find_id > .box > .pop_id_list .btn {padding-top:15px; text-align:center;}
.pop_find_id > .box > .close {display:inline-block; position:absolute; right:14px; top:14px; width:16px; height:16px; background:url('{{$이미지경로}}/button/close.png') no-repeat center; text-indent:-9999px; cursor:pointer;}
</style>

<div id="search_id_pwd">
{{$찾기폼시작}}
  <div id="pop_find_id" class="pop_find_id">
    <h2>{{$아이디비밀번호찾기구분}}</h2>
    <p class="count">회원정보에 등록한 {{$아이디비밀번호찾기조건}}와 입력한 {{$아이디비밀번호찾기조건}}가 일치해야, 인증번호를 받을 수 있습니다.</p>
    <input type="text" id="search_val" name="search_val" value="{{$인증내용}}" readOnly><input type="button" id="btn_confirm" name="btn_confirm" value="인증번호발송" onclick="confirm_send();">
    <input type="text" id="reg_code" name="reg_code" value="{{$인증번호}}">
    <div><input type="submit" value="확인"></div>
    <div id="limit_5" style="display:none;">발송된 인증번호의 유효시간은 5분입니다.</div>
    <a onclick="$('#idpwd_layer').hide();" class="close">닫기</a>
    {{$아이디리스트}}
  </div>
{{$폼끝}}
</div>

- 위치 : 관리자 > 디자인 > HTML 편집 > 페이지 편집 내 회원관련 > 회원 정보 수정 완료

(샘플소스)

- 리스트 상단 (TABLE 선언 등 반복 구문의 상단 부분)
<div id="pop_id_list" class="pop_id_list">
  <h2>고객님의 정보와 일치하는 아이디 목록입니다.</h2>
  <ul class="list">

- 리스트 반복 구문 (상품 목록 또는 게시물 목록 등 반복 구문)
    <li><input type="radio" name="member_no" value="{{$회원번호}}"> {{$아이디}} (가입 : {{$가입일}})</li>

- 리스트 하단 (반복 구문의 하단 부분)
  </ul>
  <a href="/member/login.php">로그인하기</a>
  <a onclick="chkSearchpwd();">비밀번호 변경</a>
</div>
Q. 파비콘(ico 확장자 파일)은 어떻게 만드나요?
포토샵에서도 ico 확장자를 제공하지 않으므로, 제작 또는 파일 변환을 해야 합니다.

1) 포토샵으로 만든 이미지를 파일 변환
- 우선 포토샵으로 16 x 16px로 이미지를 제작합니다.
- 파일 변환 사이트를 통해 ico 확장자로 변환합니다.

2) 아래 '파비콘 직접 제작' 링크를 통해 직접 제작할 수 있습니다.

※ 파비콘은 ico 확장자만 등록할 수 있습니다.
※ 참고하시어, 제작 및 변환할 수 있는 사이트를 공유드립니다.

▶ 파일 변환
▶ 파비콘 직접 제작 1
▶ 파비콘 직접 제작 2
Q. 등록한 팝업에 링크를 추가하고 싶어요.
HTML 태그를 사용하여, 링크를 추가할 수 있습니다.

관리자 > 디자인 > 개별디자인편집 > 팝업관리 > 등록/수정 페이지에서 이미지를 추가하면,
'내용' 영역에 추가된 이미지를 확인할 수 있습니다.
- {이미지1}

[ a 태그 형식 ]

<a href="https://www.wisa.co.kr" target="_blank">{이미지1}</a>

＊ 파란색으로 표기한 주소 URL을 연결할 URL로 변경하여, 동일한 형식을 내용에 등록하시면 됩니다.
＊ target="_blank"는 클릭 시 해당 링크를 '새 창'으로 연결합니다.
Q. 회사소개는 어떻게 수정하나요?
텍스는 HTML 편집, 이미지는 이미지 관리 메뉴에서 변경할 수 있습니다.

아래 경로에서 PC/모바일 각각 편집 페이지를 제공하고 있습니다.
■ [PC]
관리자 > 디자인 > HTML 편집 > 페이지 편집 > 회사정보 > 회사소개
■ [모바일]
관리자 > 모바일 > HTML 편집 > 페이지 편집 > 회사정보 > 회사소개

＊ 등록되어 있는 이미지는
관리자 > 디자인/모바일 > 디자인/모바일 관리 > 이미지 관리 > 기타 탭에 등록되어 있습니다.
- 파일명 : company.jpg
동일한 경로에 동일한 파일명 + 확장자로 등록 시 적용됩니다.
※ 동일한 파일명으로 업로드하는 경우 사용하는 브라우저에서 이전 '캐시'가 저장되어 있을 수 있으므로, 변경 전 이미지가 보일 수 있습니다. 이때, 사용하는 브라우저에서 '캐시 삭제' 후 확인해주시기 바랍니다.

＊ 지도 위치(Location) 수정
구글맵의 iframe을 사용하여, 연동되어 있습니다. 구글맵에서 주소를 검색하여, [지도 퍼가기]를 통해 iframe 태그를 복사할 수 있습니다.
복사한 iframe 태그를 기존 영역 양식에 맞게 변경해주시면 됩니다.
Q. 인트로 페이지를 사용하고 싶어요.
관리자 > 디자인(PC)모바일 > 디자인/모바일 관리 > 스킨 관리에서 [스킨 설정] 버튼을 클릭해서 인트로 페이지 사용 여부를 설정할 수 있습니다.
인트로 페이지 작업은 관리자 > 디자인(PC)/모바일 > HTML 편집 > 페이지 편집 > 인트로 페이지에서 HTML을 통해 등록/수정할 수 있습니다.
Q. 사이트 내에서 오른쪽 마우스 클릭을 금지하고 싶어요.
관리자 > 디자인 > 디자인 관리 > 페이지보안 설정에서 오른쪽 마우스 차단 설정을 통해 제어할 수 있습니다.