::: 나를위한 인터넷 세상

1. 스킨 디렉터리 구조

config, image, popup 디렉터리와 각 페이지의 스킨으로 구성되어 있습니다.
디렉터리 및 파일명은 변경이 불가능하며 이미지 및 스킨 내부의 코드는 변경이 가능합니다.

/www/_asapro2/member/skin/

스킨명(예: FRM_1)

config(환경설정)

image(이미지)

popup(팝업창)

email.htm(이메일 중복확인)

id.htm(아이디 중복확인)

idmodify.htm(아이디변경)

idselect.htm(회원검색)

jumin.htm(주민등록번호 중복확인)

nickglobal.htm(영어별명 중복확인)

nickname.htm(별명 중복확인)

search.htm(회원 검색)

zipcode.htm(우편번호 검색)

zipresult.htm(우편번호 검색결과)

apply.htm(회원가입체크)

idfind.htm(회원아이디찾기)

join.htm(회원가입)

kid.htm(부모님동의)

list.htm(회원목록)

loginsmall.htm(회원로그인-small)

modify.htm(회원정보수정)

myphoto.htm(회원사진변경)

out.htm(회원탈퇴)

password.htm(회원인증요청)

result.htm(회원탈퇴결과)

search.htm(회원검색)

2. 스킨 코드 구성

JavaScript, HTML, CSS, 간단한 PHP 코드로 구성되어 있습니다.

예제 - loginsmall.htm

※ JavaScript

<script type="text/javascript">
function preCheck_asm() {
if (userID_asm() && userPW_asm()) {
  document.form_asm.action = '<?=$skin->loginActionUrl()?>'; // PHP 코드: 로그인 실행페이지 주소
  document.form_asm.method = 'post';
  return true;
}
return false;
}
~ 생략 ~
</script>

※ HTML

<? if($skin->isLogin()) { ?> // PHP 코드: 로그인 후 상태에서 동작합니다.
<table width="199" height="128" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="5"><img src="<?=$skin->imageUrl()?>/small_login_left_top_after.gif" width="199"></td>
</tr>
<tr>
<td align='center' style="background-image:url('<?=$skin->imageUrl()?>/small_login_login_bg_e.gif');">
  <table border="0" width="98%" align='center' cellpadding="0" cellspacing="0" summary="table_summary">
  <tr>
   <td align='center' style='padding:5px' colspan='2'><b><?=$skin->memberName()?></b> 님 로그인 중</td>
~ 생략 ~
<? } else { ?> // PHP 코드: 로그인 전 상태에서 동작합니다.
~ 생략 ~
<? } ?>

3. 스킨 디자인 변경

예제 - 회원로그인(small)에 사진변경 이미지 링크 추가하기

▶

(1) 변경할 디자인의 스킨을 개별사용 스킨으로 설정합니다. [스킨 공통제작 방법 바로가기]
(2) 추가할 이미지를 FTP 프로그램을 통해 업로드합니다.

개별사용 스킨을 '/www/_asapro2/member/skin/mySkin/' 위치에 설정하였다면 아래에 있는 'image' 디렉터리에 이미지를 업로드합니다.
파일명은 'myphoto.gif'로 가정합니다.

(3) 스킨 소스코드를 수정합니다.

① '/www/_asapro2/member/skin/mySkin/loginsmall.htm'을 EeditPlus 등의 텍스트 편집기로 파일을 엽니다.
② 'btn_small_modify.gif' 테그 아래에 'myphoto.gif' 이미지를 <?=$skin->imageUrl()?> 함수를 사용하여 추가합니다.
③ <?=$skin->myphotoUrl()?> 함수를 사용하여 '회원사진변경' 페이지로 링크를 추가합니다.

~ 생략 ~

<? if($skin->isLogin()) { ?>

<table width="199" height="128" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="5"><img src="<?=$skin->imageUrl()?>/small_login_left_top_after.gif" width="199"></td>
</tr>
<tr>
<td align='center' style="background-image:url('<?=$skin->imageUrl()?>/small_login_login_bg_e.gif');">

<table border="0" width="98%" align='center' cellpadding="0" cellspacing="0" summary="table_summary">
<tr>
<td align='center' style='padding:5px' colspan='2'><b><?=$skin->memberName()?></b> 님 로그인 중</td>
</tr>
<tr>
<td width='55%' align='center'><a href='<?=$skin->myphotoUrl()?>'><?=$skin->getAvata()?></a></td>
<td align='center'>
<a href="<?=$skin->logoutActionUrl()?>" class="btn_logout">
<img src='<?=$skin->imageUrl()?>/btn_small_logout.gif' border='0'></a>
<br>
<a href="<?=$skin->modifyUrl()?>"><img src='<?=$skin->imageUrl()?>/btn_small_modify.gif' border='0'></a>


<br>
<a href="<?=$skin->myphotoUrl()?>"><img src='<?=$skin->imageUrl()?>/myphoto.gif' border='0'></a>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="5"><img src="<?=$skin->imageUrl()?>/small_login_left_bottom.gif" width="199"></td>
</tr>
</table>

<? } else { ?>

~ 생략 ~

(4) 변경된 내용을 웹브라우저 등으로 확인합니다.

4. 사용 가능한 함수/변수 설명

※ 디렉터리 경로

$skin->imageUrl()

사용중인 스킨의 'image' 경로입니다.

/_asapro2/member/skin/[스킨폴더명]/image/

※ 파일 경로('/myinfo', '/_asapro2' 내부의 파일)

$skin->applyUrl()	회원가입체크 페이지의 경로입니다.	/myinfo/apply.htm

$skin->modifyUrl()	회원정보수정 페이지의 경로입니다.	/myinfo/modify.htm

$skin->passwordUrl()	회원인증요청 페이지의 경로입니다.	/myinfo/password.htm

$skin->myphotoUrl()	회원사진변경 페이지의 경로입니다.	/myinfo/myphoto.htm

$skin->loginUrl()	로그인 페이지의 경로입니다.	/myinfo/login.htm

$skin->loginActionUrl()	로그인 프로세스 페이지의 경로입니다.	/_asapro2/member/login.php

$skin->logoutActionUrl()	로그아웃 프로세스 페이지의 경로입니다.	/_asapro2/member/logout.php

$skin->outActionUrl()	회원탈퇴 프로세스 페이지의 경로입니다.	/_asapro2/member/out.php

※ 파일명('/myinfo', '/_asapro2' 내부의 파일)

$skin->applyFile()	회원가입체크 파일명입니다.	apply.htm

$skin->modifyFile()	회원정보수정 파일명입니다.	modify.htm

$skin->passwordFile()	회원인증 파일명입니다.	password.htn

$skin->myphotoFile()	회원사진변경 파일명입니다.	myphoto.htm

$skin->loginFile()	회원로그인 파일명입니다.	login.htm

※ 로그인 정보

$skin->isLogin()	로그인 유/무를 판단합니다.	true / false

$skin->memberName()	로그인 사용자의 이름을 반환합니다.

$skin->memberID()	로그인 사용자의 ID를 반환합니다.

$skin->memberNickName()	로그인 사용자의 별명을 반환합니다.

$skin->getAvata()	로그인 사용자의 사진이미지 경로를 포함한 이미지 테그를 반환합니다.

※ 기타

$skin->isMobile()	사용자가 모바일 환경인지 판단합니다.	true / false

$skin->charset()	사이트가 사용중인 문자셋을 반환합니다.	UTF8, EUC-KR

$skin->adultCheck()	19세 성인인증 로그인을 구분합니다.	true / false

※ 변수

$mod_skin_cfg	스킨에 사용되는 환경설정 정보입니다.

$mod_skin_data	스킨에 사용되는 결과값 데이터(회원정보 등)입니다.

$mod_skin_exp_data	$mod_skin_data를 기반으로 다시 가공된 정보입니다.