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

툴팁과 유사한 형태로 요소를 마우스 클릭시 팝업상자가 나타나는 부트스트랩 Popover 플러그인입니다. 팝업내 콘텐츠는 title과 data-content 값을 통해 입력이 가능하며, 간단한 추가 설명문 또는 안내문을 출력시 유용한 부트스트랩 플러그인 소스입니다. data-placement 추가 속성을 통해서 클릭시 출력되는 팝업 위치를 조절할 수 도 있습니다.

상하좌우 위치 조절이 가능한 Positioning Tooltips 부트스트랩을 이용한 툴팁기능으로 상하좌우 위치조절이 가능합니다. 간단하게 마우스롤오버 툴팁이 필요할때 유용합니다. 소스내 "data-placement" 속성값에 상하좌우 값을 이용하여, 마우스 롤오버시 툴팁 위치를 자유롭게 설정이 가능합니다. 간단하게 툴팁이 사용가능해서 여러모로 좋네요.

다양한 over이펙트를 사이트 제작시에 이용해보세요. 총 8종의 over이펙트 데모페이지가 있으며 각 각 의 html 파일마다 css와 js파일이 각 각 구분하여 사용하고 있습니다. Index.httml nola.html ama.html salal.html 각 각의 데모페이지 확인과 소스는 페이지 링크를 통해서 확인하실 수 있습니다. 구 버전의 익스플로러는 작동이되지 않음을 참고해주세요

문서나 아이콘에 간단에게 적용이 가능한 텍스트 툴팁입니다. 해당사이트에서 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; }

그리드(격자) 형태의 슬라이드 배너입니다, 상단 주소에서 소스 및 데모를 확인하실 수 있습니다. css3를 이용하고 있기때문에 ie하위버전에서는 동작을 하지 않습니다. 반응형도 지원하기때문에 다양한곳에서 사용할 수 있을것 같습니다.

구글 넥스서사이트 형태의 메뉴입니다. 링크에서 데모사이트와 파일을 다운받으실 수 있으며 반응형 사이트 또는 모바일에 적용하시면 좋은 소스같습니다. css3를 이용하기 때문에 ie하위버전에서는 정상적으로 동작을 하지 않을 수 도 있습니다. 사이트 제작에 많은 도움이 되시길 바랍니다 ^^

웹접근성을 고려한 탭키사용 드롭다운메뉴 css 웹접근성을 고려한 탭키사용 가능형 드롭다운메뉴 css 코드를 웹브라우저 html에디터를 통해 확인하고 이용할 수 있습니다. "Tab"키를 통해 마크업 순서대로 메뉴가 이동하여. 웹접근성 기준에 준하는 css코드입니다. 웹브라우저 에디터를 통해 HTML소스를 손쉽게 확인하고 수정하고, 복사하여 사용이 가능합니다. 드롭다운메뉴에 사용되는 각종 CSS코드 자바스크립코드까지 수정,확인,복사가 용이합니다. 수정이 가능하므로, 응용하여 더욱 다양한 디자인으로 변경하여 사용해보세요.

html상에서 사용하는 컬러들을 한번에 보실수 있습니다^^ 해당 색상에 관한 정보 뿐만 아니라, 무료 html 소스 편집기도 사용하실수 있으며 보다 다양한 웹, html상의 색상을 빠르게 확인하실수 있습니다^^