1. 스킨 디렉터리 구조
config, image, popup 디렉터리와 각 페이지의 스킨으로 구성되어 있습니다.
디렉터리 및 파일명은 변경이 불가능하며 이미지 및 스킨 내부의 코드는 변경이 가능합니다.
 |
/www/_asapro2/member/skin/ |
 | |
스킨명(예: FRM_1) |
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를 기반으로 다시 가공된 정보입니다. |
|
|
