친절한효자손 취미생활

홈페이지를 가입하거나 온라인 약관 동의 시에 자주 나오는 체크박스! 이 체크박스는 보통 <input> 태그를 사용해서 만듭니다. 기본적인 형태는 이렇습니다.

 

<input type="checkbox">

 

이렇게하면 인풋 입력창이 체크박스 상태가 됩니다. 최근에 이 태그를 사용해서 새 해 할 일 목록을 만들어 보았습니다. 관련글은 아래에 있습니다.

 

친효애드온 - TO DO LIST (투두리스트) 새 해 맞이 목표 양식 모듈

 

생각만큼 멋지게 나와줬기에 마음에 들었습니다. 버튼도 만들고 누르면 켜지면서 목록 텍스트 색상도 진하게 바뀌는 연출! 아주 훌륭하게 완성 되었습니다. 하지만 문제는 이후입니다. 새로 고침을 하면 다시 처음 상태로 초기화가 되어버립니다. 이러면 안 되겠지요? 체크가 된 상태를 유지하고 싶었는데 티스토리에서는 구현이 매우 어렵습니다.

 

물론 방법은 있을겁니다. 기본적으로 스킨 제작 시 활용되는 index.xml 문서와 스킨의 html 관계를 이어주는 치환자라는 개념을 사용하면 왠지 될 것 같습니다. 하지만 사용 확장성에서 떨어지게 됩니다. 친효스킨에서는 사용 할 수 있도록 만들수는 있어도 타스킨에서는 어렵습니다. 이틀동안 열심히 구글 검색을 통해서 스크립트 (제이쿼리) 등으로 해결 할 방법들을 모색해 보았으나 아직까지 스크립트 실력이 부족한 제 입장에서는 찾는 것 조차 버거운 일이었습니다. 그래서 매우 간단한 방법을 사용하기로 결정했습니다.

 

<input> 태그 자체의 매소드 속성으로 체크된 상태를 유지할 수 있는 방법이 있습니다. checked를 입력하면 됩니다. 즉 체크박스 태그를 이 방법으로 수정하면 아래처럼 되는 것입니다.

 

<input type="checkbox" checked>

 

인풋 태그 안쪽에 checked만 써넣으면 늘 체크가 된 상태로 유지되는 것입니다. 엄청 간단하죠? 별도의 스크립트 사용 없이 단순하게 체크된 상태로 그냥 쭈욱 유지를 하는 방법은 이게 가장 간단하고 빠릅니다. 사용자가 임의로 체크를 하거나 풀거하 하는 행동을 실시간 저장하는 방법은 스크립트쪽으로 확장해야 하는 영역이라 티스토리에서는 어렵습니다. 개인 홈페이지를 운영하시는 분들은 서버의 관리자이기에 사용 가능하지만 티스토리는 서버 관리자 권한이 개인 유저에게 제공되지 않기 때문입니다. 참고로 checked는 크롬 개발자 모드에서 살펴보시면 실제로는 checked="checked" 라고 적용되고 있을 것입니다. 따라서 둘 중 아무거나 사용해도 상관 없습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band