#001. 플립스위치(토글) 형식 체크박스 만들기 _ HTML · CSS



심심한 체크박스는 가라! 개성 충만한 체크박스를 심플하게 만들어보자!

정말 쉬워서 당장 블로그에 달고 싶어지는 체크박스 커스터마이징을 해봅시다.


시작하기 차근차근 배워가는 노하우

먼저, 이 곳 (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;만 추가해주셔야 됩니다!


 주의  티스토리 치환자는 스킨 제작이 아닌 글에서도 적용됩니다.

위 소스코드 내에서 [샵샵_ ... _샵샵]를 [##_ ... _##]으로 바꾸듯이 '샵'을 '#'로 모두 바꿔주셔야 됩니다.

이미지 맵

@Eruis

당신이 찾는 게임의 모든 것! 각종 게임정보 · 게임 패치 · 게임 플러그인 · 게임 팁 등이 담긴 게임로그. We Makes Your Fun! Section.G

    '라이프다이어리/잡담' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 0개 입니다.

    *

    *