웹솔루션개발 25년 노하우! 해피CGI의 모든것

재미있고 다양한 체크박스를 만나보세요 체크박스 형태와 데모자료는 데모사이트 주소에서 확인하실 수 있습니다. 구버전 브라우저에서는 작동이 안될 수 있으니 참고하세요 ^^ 사이트 제작에 많은 도움이 되었으면 합니다.

문서나 아이콘에 간단에게 적용이 가능한 텍스트 툴팁입니다. 해당사이트에서 html과 css 소스를 바로 확인할 수 있습니다. HTML 태그 를 타겟팅하여 작동합니다 .

HTML Check box label here Check box label here Check box label here CSS .box { width: 100%; max-width: 240px; margin: 2rem auto; } input {} input:checked + label{ background: #fefe38; }

레이어 팝업형식의 부트스트랩 모달윈도우 팝업입니다. 로그인창, 회원가입창 등 집중해야되는 새창에 효과적인 소스입니다. 모달 윈도우에 이미지는 물론, 여러가지 소스, 내용도 삽입해서 이용이 가능합니다. 부트스트랩 CSS 및 플러그인 클래스 조절로 다양한 모달 윈도우 팝업을 이용하실 수 있습니다. 모달 윈도우 플러그인 메서드, 클래스 , 이벤트는 https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp 참고하세요.

JQuery CSS3 으로 3단계의 메뉴를 표현간 간단 드롭다운 탐색 메뉴입니다. 반응형으로 되어 있어, 화면크기에 따라 조정됩니다. [데모사이트] https://www.freshdesignweb.com/demo/2013/08/3_level_responsive_drop_down_navigation_menu/

한눈에 CSS Reference 확인할 수 있습니다. 위 이미지와 같이 다양한 선택자들을 확인할 수 있으며 클릭하면 아래와같이 예제와 함께 결과화면도 확인하실 수 있습니다. html코드 Css코드 결과 지원브라우저 및 실시간으로 바로 수정을하여 데모를 확인하실 수 도 있습니다.

전환 시퀀스를 구현하는 CSS http://callmenick.com/post/last-in-first-out-css-transitions 소스 파일은 다운로드 받을 수 있으며, 데모로 확인이 가능합니다.