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

input tyle="range" 슬라이드 디자인 입니다.사이트 꾸미기에 좋을거 같습니다.HTML과 CSS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML  CSSbody{  margin: 0;  min-height: 100vh;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;  flex-wrap: wrap;  gap: 2em;  background: #f6f8fe;} [type="range"].kawaii {  --base: #fe8ce4;  --light: color-mix(in sRGB, var(--base) 60%, #fff);  --lighter: color-mix..

formRowRepeater는 동적 양식 행 관리를 위한 경량 jQuery  플러그인입니다. 사용자는 드래그 앤 드롭을 통해 양식 행을 추가/복제하고, 기존 행을 제거하고, 순서를 변경할 수 있습니다. 입력 필드, 선택 드롭다운, 확인란, 라디오 버튼 등을 포함한 다양한 입력 유형과 함께 작동합니다. 플러그인의 핵심 기능은 양식 내에서 중복 행을 관리하는 것입니다. 온라인 인보이스 시스템용 양식을 만든다고 상상해 보십시오. 송장의 각 항목에는 제품 이름, 수량 및 가격에 대한 필드가 필요할 수 있습니다. 이러한 필드의 여러 인스턴스를 하드 코딩하는 대신 formRowRepeater를 사용하면 단일 "템플릿 행"을 정의할 수 있습니다. 이 템플릿은 새 행을 동적으로 생성하기 위한 청사진 역할을 합니다. 그..

인풋박스 선택시 아래와 같이 변경됩니다.css로 제작되어 있어 쉽게 수정이 가능합니다.첨부된 파일을 다운로드 받으면 html 과  css 전체 소스를 확인할 수 있습니다.

한개 또는 다중으로 범위를 선택하는 디자인 소스 입니다. html 소스 css 로 쉽게 디자인 변경이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 전체 소스를 확인할 수 있습니다. 해당 사이트에서는 디자인 변경을 미리 해볼수 있습니다.

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 jquery.dynamicWidth.js 플러그인을 링크합니다. 2. 크기를 조정하려는 요소에 dynamicWidth() 메서드를 호출합니다. 3. 크기 조정 가능한 요소의 최소 너비를 설정할 수 있습니다. (기본값 : 0) 4. 크기 조정 가능한 요소의 오른쪽 패딩을 추가합니다. (기본값 : 3px) - 작동 예제

인풋 박스에 포커스가 되면 라벨을 이용한 인풋 타이틀이 위치가 변경됩니다. 타이틀의 스타일도 변경됩니다. 인풋의 placeholder 같은 느낌을 주면서 디자인을 할 수 있습니다. 해당 사이트 또는 첨부파일을 다운로드 받아보시면 전체 소스를 확인할 수 있습니다. 표시한 부분을 소스를 확인해보시면 쉽게 응용이 가능합니다.

인풋박스(타입:파일)의 여러가지 형태의 디자인 커스터마이징입니다. 마우스 오버시 색상이 변경됩니다. 업로드하는 파일개수가 출력됩니다. 일반적인 파일명이 출력되는 형태도 있습니다. 파일업로드를 강조해야하거나 사이트의 주기능인 경우에 사용할수 있겠습니다. 해당사이트에서 소스를 다운로드 할 수 있습니다.

input, textarea, div 등 다양한 html 요소내 text 정보를 손쉽게 선택하고 선택해제할 수 있는 JQuery 소스입니다. 해당 소스 제공사이트를 보시면 선택시 필요한 javascript 함수와, 선택해제시 필요한 javascript 함수가 나누어져서 있습니다. 사이트 구성시 다양한 부분에 활용 가능합니다. ie10이상, 크롬, 사파리, 파이어폭스 등 다양한 브라우저에서 정상작동되네요.

Input 태그 그룹내 정보를 삭제하는 IE 전용 기능을 모든 브라우저에서 이용 가능합니다. 기존에 IE10, IE11에서만 사용가능한 input 삭제 기능을 모든 브라우저에서 이용할 수 있는 자바스크립트 + CSS 소스입니다. 해당 사이트에서 제공되는 소스에서는 input 박스에 롤 오버시 리턴버튼이 출력되도록 제어하는 소스도 있습니다. 다양한 부분에 편의기능으로 넣으면 좋더군요...

익스플로러와 달리 크롬에서input박스에 커서가 올라 갈 경우 의도치 않게 푸른색 테두리가 나타나는 현상을 많이 보셨을것입니다. 이를 해결하기 위해서 간단하게 inpu에 Focus CSS를 적용해주시면 한번에 해결이 가능합니다. input:focus { outline: none; }