 
오늘은 아람스쿨 솔루션에서 사용되고 있는 자바스크립트 내부함수와 유용한 팁에 대해서 살펴보도록 하겠습니다. 중요한 부분이므로 반드시 메모를 해두시거나 기억해주시기 바랍니다.
me_popup=1 변수는 특정페이지의 상단/왼쪽/하단디자인을 없애는 기능입니다.
popup_window 함수는 가로크기와 세로크기에 따라 링크주소가 새창으로 열리는 기능입니다.
me_popup변수와 popup_window함수는 [고급6단] 제품소개 솔루션을 갤러리샵으로 변경에서 설명했습니다.
이번 미션은 위의 소스들을 사용하여 구인구직 채용정보목록에서 상호를 클릭하면 채용정보에 대한 간략정보가 새창으로 표시되도록 만들어보겠습니다.
[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]로 이동한 후 구인구직2.0 > 채용공고 상세보기를 클릭합니다.
① 현재 채용공고 상세보기를 복사(Ctrl + C)합니다. ② "나만의 디자인"의 새로만들기를 클릭합니다. ③ 아래와 같이 디자인제목, 강제접근코드를 입력하고, 채용공고 상세보기에서 복사된 소스를 붙여넣기(Ctrl + V)합니다.
④ 해당소스를 아래와 같이 수정하고 "새로만들기"버튼을 클릭합니다.
<div style="border:1px solid #DEDEDE;width:100%" >
<table width=100% cellpadding=0 cellspacing=0 border=0> <tr> <td style="border:5px solid #F3F3F3;padding:10" >
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> <tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>구인 상태</b></td> <td style='padding:5' width=150 ><b>{JOB_STATE2}</b></td> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>경력</b></td> <td style='padding:5'>{JOB_CAREER}</td> </tr> <tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> <tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>모집업종</b></td> <td style='padding:5' >{JOB_JOBLIST}</td> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>근무지</b></td> <td style='padding:5'>{JOB_ADDRLIST}</td> </tr> <tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> <tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>급여</b></td> <td style='padding:5'>{JOB_PAY}</td> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>학력</b></td> <td style='padding:5'>{JOB_SC}</td> </tr> <tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> <tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>성별</b></td> <td style='padding:5'>{JOB_SEX}</td> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>연령</b></td> <td style='padding:5'>{JOB_AGE}</td> </tr> <tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> <tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>모집인원</b></td> <td style='padding:5'>{JOB_WORKER_CNT}</td> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>근무형태</b></td> <td style='padding:5'>{JOB_DUTY_STR}</td> </tr> <tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> </TABLE>
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>업무내용</b></td> <td style='padding:5' >{JOB_WORK_INFO}</td> </tr> <tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> <tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>접수방식</b></td> <td style='padding:5' >{REGTYPE_LIST}</td> </tr> <tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr> <tr> <td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>마감일</b></td> <td style='padding:5' >{CLOSE_DATE}</td> </tr>
<tr><td height=1 bgcolor="#D6D6D6" colspan=10></td></tr>
<tr><td height=3 bgcolor="#F7F7F7" colspan=10></td></tr> </table> </td> </tr> </table> </div>
홈페이지에서 확인해보면 다음과 같이 채용공고 상세페이지가 나타납니다.
새창을 띄워야 하기때문에 상단/왼쪽/하단디자인을 없애는 me_popup =1 변수를 뒤쪽에 추가합니다.
[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]로 이동한 후 구인구직2.0 > 채용정보목록으로 이동합니다.
아래와 같이 popup_window함수를 사용하여 수정합니다.
 
img_view 함수는 이미지의 크기에 맞도록 새창을 띄우는 기능입니다. 위의 함수를 사용하여 제품목록에서 제품이미지를 클릭하면 새창에서 제품이미지가 표시되도록 만들어보겠습니다.
제품목록에 표시되는 이미지는 150*150 크기이며, 이 상태에서 위의 함수를 사용하면 현재 이미지의 크기인 150*150으로 나타나게 됩니다. 따라서 현재 이미지의 크기를 확대해야 합니다.
[컨텐츠 관리 》 컨텐츠 관리 》 환경설정]로 이동한 후, 제품목록의 썸네일이미지를 300*300으로 수정합니다.
홈페이지에서 상단의 제품소개메뉴를 클릭해봅시다.
제품목록에 표시되는 이미지들이 아래와 같이 300*300으로 크게 확대되었습니다.
다시 제품목록을 이전의 크기인 150*150으로 만들어봅시다.
[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]에서 제품소개 > 제품목록을 클릭해서 아래와 같이 소스를 변경해주세요.
원래의 제품목록의 크기로 변경되었습니다.
여기에 img_view함수를 추가해서 아래와 같이 소스를 다시 수정합니다.
모두 완료되었습니다. 제품목록에서 제품이미지를 클릭해보면 새창으로 300*300크기의 이미지가 나타납니다.
아래의 소스는 각 회원등급 코드에 따라 다른 내용을 표시하고자 할 경우에 사용할 수 있습니다.
<DIV id=memlv_div_3100 style="display:none;">회원등급 3100 회원만 보임</div>
기억이 나시나요? [고급5단] 구인구직 마이페이지 만들기에서 위 소스를 적용해보았습니다.
이번 미션은 메인화면 왼쪽디자인에 회원등급마다 다른 문구가 출력되도록 만들어보겠습니다. 우선 등급코드를 확인하기 위해서 [회원관리 》 회원관리 》 회원등급관리]로 이동합니다.
필자의 회원등급별 코드는 다음과 같습니다.
일반회원 - 등급코드 100
실버회원 - 등급코드 1000
골드회원 - 등급코드 2000
VIP회원 - 등급코드 3000
기업회원 - 등급코드 4000
[디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]에서 왼쪽디자인을 선택하고, "메인 왼쪽 디자인"의 수정버튼을 클릭해서 아래와 같이 소스를 수정합니다.
회원등급별로 다른 문구가 출력이 되는것을 확인할 수 있습니다.
아래의 소스는 로그인과 로그아웃의 여부에 따라서 다른 내용이 나타나도록 하는 기능입니다. 또한, 위치에 상관없이 여러번 재사용이 가능하므로 유용하게 사용할 수 있습니다.
<div class="login_block"> 로그인했을때 </div>
이번 미션은 위의 소스를 이용하여 홈페이지 상단메뉴를 아래와 같이 변경해보도록 하겠습니다.
로그아웃 상태일때 ==> HOME | 로그인 | 회원가입 | 미니샵전체보기 | 배송조회
로그인 상태일때 ==> HOME | 로그아웃 | 내상품팔기 | 내미니샵 | 미니샵전체보기 | 배송조회
[디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동한 후 상단디자인에서 "내가 만든 상단 디자인" 수정버튼을 클릭하고 아래와 같이 소스를 수정합니다.
[로그아웃 화면]
[로그인 화면]
아래의 스크립트는 PNG파일을 플래시형태로 만드는데 사용할 수 있는 기능입니다. PNG파일은 배경이미지를 투명으로 만드는게 사용할 수 있습니다.
<script>flash('/img/png.swf?img_url=PNG파일경로', 가로크기, 세로크기)</script> <script>flash('/img/png.swf?img_url=PNG파일경로&url=링크주소', 가로크기, 세로크기)</script> ※ /img/png.swf파일은 솔루션내에 삽입되어 있므로 별도로 추가하지 않아도 된답니다. 이번 미션은 위의 소스를 응용하여 메인페이지에 팝업창으로 투명이미지를 띄우고, 팝업창을 클릭하면 닫히도록 만들어보겠습니다. "앞에서 배운 popup_window 함수를 이용하면 쉽지 않나요?"라고 질문하는분들 계실건데요... 안타깝게도, 팝업창에서는 배경색상이 투명이 되지 않습니다. (흰색배경이 기본으로 나타납니다) 우선 첨부된 sample_png.zip 파일을 다운로드 받아 압축을 풀고 sample_png.png파일을 웹디자인FTP에 업로드하세요. 이때 업로드한 파일의 경로는 메모해두세요.
[디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동해서 "내가만든 상단디자인"을 아래와 같이 수정해주세요.
홈페이지의 메인화면으로 이동하면 아래와 같이 나타나며, 띄워진 이미지를 클릭하면 사라집니다.
실행화면 => http://uhkr54.anybuild.com/shop_main/main_body.htm
아래의 스크립트 소스는 네이버지도를 만들어주는 아주 유용한기능입니다. <script>naver_map('주소', 가로크기, 세로크기);</script>
이번 미션은 추가페이지에 "아람커뮤니케이션"의 주소를 네이버지도로 만들어보겠습니다. [디자인관리 》 고급 디자인 관리 》 추가 페이지 관리]로 이동하여 아래와 같이 추가페이지를 생성합니다.
생성된 추가페이지를 클릭해보면 아래와 같이 네이버지도가 표시됩니다.
아래의 소스는 현재 홈페이지를 SNS와 연동할때 사용할 수 있습니다.
<a href='javascript:goYozmDaum()'>다음-요즘</a> 함수들을 설명하기에 앞서 SNS(Social Network Service)에 대해서 먼저 설명드리겠습니다. [네이버지식백과에서 가져온 SNS의 정의] "온라인상에서 불특정 타인과 관계를 맺을 수 있는 서비스. 이용자들은 SNS를 통해 인맥을 새롭게 쌓거나, 기존 인맥과의 관계를 강화시킨다. 국내의 대표적인 SNS로는 '싸이월드'를 들 수 있다..."
싸이월드는 많이 해보셨죠? 다음 요즘, 페이스북, 미투데이, 트위터도 모두 SNS랍입니다. 페이스북과 트위터는 미국에서 서비스하고 있는 SNS이고, 요즘과 미투데이는 우리나라의 다음과 네이버에서 서비스하고 있는 SNS랍니다.
이와 같은 SNS는 홈페이지를 홍보하기 위해서 활용할 수 있는데, 아람스쿨 솔루션에서는 홈페이지의 특정페이지에 SNS를 연동하는 기능을 가지고 있답니다. 쇼핑몰의 상품페이지에서 활용하면 상품홍보효과가 있고, 홈페이지의 상단에 활용하면 홈페이지 홍보효과가 있겠지요..
이번 미션에서는 본인의 홈페이지를 SNS와 연동이 되도록 만들어보겠습니다. [디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동하고 상단디자인의 "내가 만든 상단디자인"의 수정버튼을 눌러 아래와 같이 소스를 수정합니다.
아래의 소스는 문서내의 특정 위치에 게시판을 삽입하고 게시판의 내용에 따라 높이가 자동으로 조절되는 기능을 가지고 있습니다. ※ height 값은 조절하지 않으셔도 됩니다.
[페이지내에 삽입할 소스]
<iframe src='게시판주소' width=100% height=100 frameborder=0 scrolling=no name='iframe_bbs' id='iframe_bbs'>
</iframe>
[게시판 하단디자인에 삽입할 소스]
<script> web_resize_iframe("iframe_bbs") </script>
이번 미션은 위의 소스를 이용해서 이전에 만들었던 앨범형게시판을 메인페이지에 삽입해보도록 하겠습니다.
① [디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동해서 Body디자인의 "내가 만든 메인 디자인" 수정버튼을 클릭합니다. ② 편집창아래의 Link URL버튼을 클릭하고, 게시판주소의 "앨범형"을 클릭해서 복사합니다.
③ 맨하단에 아래의 소스를 추가합니다.
게시판을 수정하기 위해서 [커뮤니티 》 게시판 관리 》 게시판 관리]으로 이동합니다.
"앨범형"의 환경설정버튼을 눌러 아래와 같이 하단디자인에 소스를 추가합니다.
이때, 메인에 삽입했던 소스의 name='iframe_bbs' id='iframe_bbs' 와 게시판에 삽입된 web_resize_iframe("iframe_bbs")의 이름이 모두 동일해야 합니다.
수고하셨습니다. ^^
완성화면 : http://uhkr54.anybuild.com/shop_main/main_body.htm
댓글 58개 |
[고급13단] 모바일웹 프로그램 설치 및 메인페이지 만들기
[고급11단] 나만의 목록으로 "전국 가맹점 현황" 만들기
