(누르면 이동. 아래 읽기 전이든 후든 참고하면 좋아요)
나는 만들고 싶었다. 무엇을? 체크박스를 내 입맛대로 만들고 싶었다. 체크박스를 이미지로 구현하는 건 여기 말고도 구글로 검색해보면 널려있다. 고로 그 부분은 패스한다. 그러나 문제는 XE에 적용했을 때, 체크박스 이미지를 클릭해서 on(true)일 경우 그걸 XE가 알아듣게 해야 한다는 것이었다. 자바스크립트의 기본(일단 function-함수-와 조건문)을 약간 아셔야 "음. 이런 소리구나~" 싶으실 내용. 사실 자세한 내용 모르고 복사 붙여넣기로 적용(혹은 실패 ㅋㅋㅋㅋ)하면서 익히시면 다음부턴 하기 쉬울 겁니다. 일단 이건 베이직한 로그인 폼을 수정한 것이므로 소스안에 들어가는 아이디나 클래스 값이 너님과는 조금 다를 수 있습니다. 그래도 기본 적으로 적용된 소스 빼고 아래 설명된 부분만 손보고 추가한다면 너님도 충분히 너님이 만든 이미지로 체크박스를 구현할 수 있습니다.
이미지 작업 먼저 해봅시다.
on/off.gif을 각각 맨들었습니다.
▼
1. 자바 스크립트 - 아래 내용을 login_form.html 파일 상단에 넣어줍니다. 캐바캐로 파일명은 다를 수 있으나 어쨌든 로그인 폼을 출력하는 페이지 상단에 넣어주면 됩니다.
<!-- 로그인 유지 checkbox 이미지 스크립트<script>function autologin(img) {if(img.checked) {img.checked = false;img.src="/경로/off.gif"} else {img.checked = true;img.src="/경로/on.gif"}}</script>-->
2. 출력 - 해당 로그인 폼을 출력할 자리에 낑가(?) 넣습니다.
<!-- checkbox label 값을 이미지로 출력 -->
<input type="checkbox" name="keep_signed" id="keeplogin" value="Y" style="display:none"/>
<label for="keeplogin" title="{$lang->keep_signed}" class="check_img">
<img src="./images/off.gif" onClick="autologin(this);"/>
</label>
<!-- /checkbox custom-->
<-- default.css 스타일 시트에 들어갈 내용. -->
.check_img>img {vertical-align:bottom; margin-right:5px;} 로그인 폼에 맞춰 알아서 각자 설정.
※. 본래 있던 기본 체크박스를 style="display:none;"으로 숨긴다.
※. [img="on/off.gif"]를 label로 감싼다.
※. label의 for 속성을 사용하게 되면 input과 label을 연결할 수 있으며 label을 클릭하면 자동으로 연관된 input이 활성화(포커스)된다. 고로 input에 id="keeplogin"를 주고 lable for="keeplogin"로 연결함.
▼
완ㅋ성ㅋ(빠밤)
+ 기본적으로 로그인폼 색상이나 디자인 자체가 너랑 다른데??? 라고 하시면, 음, 저것은 제가 수정한 로그인 폼입니다. (....)
+ 사족 : 처음엔 이게 다 무슨 소리일까... 하며 눈물이 또르륵 흘렀다. (게다가 나는 공부 머리가 없다. 머리가 나쁘다.) 그러나 인내심을 가지고 한 줄 한 줄 아주 천천히 뜯어보며 이것은 이런 의미, 저것은 저런 의미, 하고 이해가 될 때까지 읽고 읽고 또 읽고, 그러다 보니 종국에는 "아하, 내가 읽었던 개소리가 사실은 이런 개소리였군!"하고 이해가 된다. (아마도 이해된 듯. 아마도?; 나중에 다시 보면 무슨 개소리지? 할 게 뻔하지만.)
+모르면 질문하세욥. (나도 잘 모르지만 아는 한도 내에서는 알랴줌)
