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

위와 같이 텍스트를 입력할 경우 아래처럼 회색폰트로 텍스트가 출력됩니다. 입력되는 텍스트이외에 Placeholder Text 만 색상을 변경하기 위애서와 아래와 같은 속성을 사용하여 변경이 가능합니다. input::-webkit-input-placeholder { color: green; } input:-moz-placeholder { color: green; } 위의 소스는 Firefox 4 이상, Chrome 4 이상, Safari 5 이상, Opera 11.6 및 Internet Explorer 10 이상에서 지원합니다.

클릭하면 아래 이미지로 변경이 됩니다. 해당 사이트에서 html, css, js 소스를 확인할 수 있습니다.

/** * 서비스명, 제목 * @author 김행복 happycgi@happycgi.com * @version 5.1 * @date 2017-10-27 * @copyright Copyright (c) happycgi Media. All right reserved. **/ /* * 함수, 메소드 * @param 자료 파라미터 설명 * @retrun 자료 설명 **/

css3와 js를 이용하여 아코디언 형태의 ui를 만들수 있는 자료입니다 ^^ 어느정도의 css를 다룰수 있어야지 디자인이 수정 가능합니다 위 링크로 이동하시면 데모 및 자료 다운로드가 가능합니다. 페이지내에서도 간단한 html코드 및 css구성을 확인하실 수 있습니다. css3를 이용한 자료이기 때문에 ie하위버전에서는 동작이 안될수도 있는점 참고하세요~ 홈페이지 제작에 도움이 되시길 바랍니다 ^^

복잡한 자바스크립트 소스 대신 간단하게 bootstrap을 활용한 드롭다운 메뉴 소스입니다. 기본 적인 1차 메뉴 구성 및 1차 메뉴 마우스 오버 효과는 물론이고 클래스 지정을 통해 간단하게 2차 드롭다운 메뉴 구성도 가능합니다. 다른 클래스(.nav-stacked) 지정으로 상하 메뉴 구성도 손쉽게 가능합니다.

bootstrap Scrollspy 플러그인을 이용하여 마우스 스크롤링시 페이지의 특정 섹션을 타겟팅 할 수 있습니다. 원 페이지 형태의 사이트 제작시에 유용한 소스이며, 메뷰바의 ID값과 섹션의 링크 ID값이 일치하면 되고, 메뷰바의 활성상태 변경 속도도 제어가 가능합니다. 여러모로 활용이 가능한 bootstrap 소스입니다.

패널형 슬라이드 배너로 랜딩페이지 또는 이벤트 페이지 제작에 유용할것 같으며 반응형으로 만들어져 있습니다. PC 모바일 각 각의 패널 타이틀을 누르게되면 해당 패널에대한 상세 내용을 확인할 수 있습니다. 우측의 카테고리 메뉴같이 생긴 버튼을 누르시면 텍스트 형태의 메뉴도 확인할 수 있습니다. 링크페이지에서 자료를 다운로드 받으실수 있으며 view demo를 클릭하시면 상세히 확인하실 수 있습니다. 파일을 다운받아보시면 html파일과 리셋 css, 디자인css , 관련 js로 구성되어 있으며 파일 편집을 통하여 다양하게 이용하실 수 있습니다.

html, css 로만 디자인된 체크박스, 라디오버튼, 셀렉트박스입니다. 해당 사이트에서 소스 확인 및 직접 변경하여 적용된 화면도 바로 확인이 가능합니다.

사이트이동후 원하는 메뉴를 선택합니다. 선택한 메뉴페이지 입니다. 하단의 다운로드 소스를 클릭하신 후 압축파일을 다운받습니다. 다운받은 압축파일을 풀면 해당 메뉴의 html/css/js파일을 확인 하실 수 있습니다. 다운받은 메뉴를 확인하실 수 있습니다.

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