심심한 체크박스는 가라! 개성 충만한 체크박스를 심플하게 만들어보자!
정말 쉬워서 당장 블로그에 달고 싶어지는 체크박스 커스터마이징을 해봅시다.
시작하기 차근차근 배워가는 노하우
먼저, 이 곳 (http://proto.io/freebies/onoff/)을 클릭하여 커스터마이징을 도와줄 웹 페이지로 이동합니다.
* 위 이미지는 이해를 돕기 위해 편집된 화면이며 실제 웹 페이지는 영문으로 작성되어 있습니다.
열린 페이지에서 위의 항목을 참조하여, 설정하시면 됩니다. ( 간단한 단어 정도 읽으실 수 있다면 안 읽어보셔도 됩니다. )
설정이 완료되셨다면 하단으로 내려 작성된 커스텀스타일시트(.CSS)를 복사하셔서 원하시는 곳에 붙여넣으시면 됩니다.
그리고 조금 더 내리시면 만드신 체크박스를 HTML상에서 적용할 수 있는 코드를 보실 수 있습니다.
해당 코드를 모두 복사하시고, HTML 파일 중에 원하는 부분에 붙여넣으시면 됩니다.
IN Tistory 이 팁을 티스토리에서 써먹으려면?
위에서 배운 내용을 티스토리 비밀 덧글 설정란에 사용해보도록 하겠습니다.
먼저, 메모장을 열어 .CSS 코드와 .HTML 코드를 모두 복사한 뒤, 클래스명을 내 마음대로 수정해줍니다.
기본 클래스명은 onoffswitch 이니 에디터의 바꾸기 기능을 클래스명을 수정줍니다.
예제에서는 클래스명을 secret-toggle으로 지정한 뒤, 적용해보겠습니다.
블로그 관리 > 꾸미기 > HTML/CSS편집으로 들어가서 skin.html에 방금 갈무리해둔 HTML코드를 복사해넣습니다.
복사한 후, 위 이미지처럼 체크박스의 name(이름) 항목을 방명록이면 방명록 비밀글, 덧글이면 덧글 비밀글의 티스토리 치환자로 바꿔주셔야 합니다.
그 다음, 바로 아래 style.css에 나머지 갈무리해둔 CSS코드를 복사해넣습니다.
저장을 누른 뒤, 수정한 곳이 제대로 적용이 되었는지 확인해주세요!
* 스킨마다 클래스 명이나 기존 CSS와 충돌 문제 등으로 적용이 제대로 되지 않는 경우가 있으니, 꼭 테스트를 해보시기 바랍니다.
보너스 초보 티스토리 유저에게 드리는 선물
티스토리 가이드 상에 나온 스킨 클래스명에 최적화된 소스코드입니다.
체크박스의 클래스 명은 본 강좌에서 소개된 웹 페이지에서 생성한 기본 값 그대로입니다.
주의 일부 영역을 재선언을 해서 CSS 소스코드를 일부 수정해주셔야 됩니다.
첫번째 코드인 .onoffswitch {position: relative; ... }의 앞에 display: block;를 넣어주셔셔 .onoffswitch {display: block;position: relative; ... }로 수정해주셔야 됩니다.
스킨마다 스타일이 각기 다르니, 꼭 display: block;만 추가해주셔야 됩니다!
주의 티스토리 치환자는 스킨 제작이 아닌 글에서도 적용됩니다.
위 소스코드 내에서 [샵샵_ ... _샵샵]를 으로 바꾸듯이 '샵'을 '#'로 모두 바꿔주셔야 됩니다.
