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

서명 패드는 부드러운 서명을 그리기 위한 JavaScript 라이브러리입니다. html5 캔버스 기반으로 모든 최신 브라우저에서 작동하며 외부 라이브러리를 이용하지 않습니다. 서명, 지우기, 돌리기, 색상변경, 다양한 확장명 이미지로 변환등을 지원합니다.

실제 셀렉트 박스가 아닌 라디오박스를 이용하여 css 만으로 셀렉트 형태로 구현한 셀렉트 박스 디자인 입니다. 옵션이 라디오 박스로 디자인 되어 있습니다. 마우스 방향에 따라 아이콘이 출력되는 방향이 달라서 두개씩 구현되어 있습니다. 선택된 값이 셀렉트 박스처럼 보일수 있도록 디자인 되어 있습니다.

트랜지션 효과와 함께 반응형으로 제작된 테이블입니다. 데모페이지내에서 export버튼을 눌러 파일을 다운받으실 수 있습니다^^

다운로드 받은 파일의 압축을 해제한 후 example.html 파일을 웹브라우저로 열어 보면 확인이 가능합니다. 위 그림 처럼 스크롤이 필요한 부분에 위 아래에 2개의 스크롤을 생성하도록 할 수 있습니다. 화면의 크기가 변경되면, 없었던 스크롤이 생기는 예제도 있습니다. 이용하는 방법은 아래의 순서대로 진행을 하면 됩니다.

카카오톡 소셜 API는 사용자의 프로필정보와 친구 정보를 제공하는 API 입니다. 하지만 모든 친구 목록을 받아 올 수 없을수도 있으며, 해당 정보를 Database에 임의 저장하여 활용하시면 안됩니다. 사용자의 프로필을 받아오는 API 이용방법은 아래 페이지에서 확인이 가능 합니다. https://developers.kakao.com/docs/latest/ko/kakaotalk-social/rest-api#get-profile 친구목록의 경우에는 https://developers.kakao.com/docs/latest/ko/kakaotalk-social/rest-api#get-friends 페이지에를 참고 하셔서 작업을 하시면 되겠습니다. 친구목록만 활용하는 경우가 아니라 친구에게 메시지를 보내야 하는..

온라인상에서 (웹페이지) 전자 서명을 받을 상황이 필요하신 경우 이용이 가능한 Jq-ignature 입니다. 가볍게 구동되어 좋지만 서명하는 공간에서 마우스가 벗어났다가, 다시 서명공간으로 접근시에 마우스가 클릭이 된 형태로 서명이 이어지게 되는 불편함이 있습니다. 데모는 http://bencentra.github.io/jq-signature/ 페이지에서 확인이 가능하고, 페이지 하단에서 서명을 한뒤에 Save Signature 버튼을 클릭하여 이미지 생성을 확인 할 수 있습니다. 해당 페이지에는 이용하는 방법도 같이 기재 되어 있습니다.

SK 에서 공개한 무료 폰트 입니다. 많은 프로덕트에서 사용자의 환경과 무관하게 동일한 시각적 경험을 제공하기 위해 본고딕―노토산스를 선택합니다. 라고 설명 되어있습니다. 웹폰트로도 제공하니 웹에서도 사용해보면 좋을것 같습니다.

간단한 스크립트 코드를 넣으면 어떻게 작동하는지 타임라인화 하여 로직을 설명해주는 사이트 입니다. javascript 외에도 typescript , C++, Paython 등도 가능합니다.

3가지 색상을 바로보고 비교할수 있는 컬러픽커 입니다. 데모 링크를 통해서 바로 확인이 가능하며 하단의 Export 버튼을 클릭하여 자료를 다운 받으실 수 있습니다^^

* photo effect 이미지 위로 마우스를 가져갈때 어두워지는 효과를 적용합니다 사진이나 일부 흑백이미지에 좋은 효과를 줍니다 * 적용방법 적용방법은 간단한 편입니다 첨부된 샘플코드를 다운로드하여 원하는 웹디렉터리에 업로드후 적용할 html 파일에 코드들을 추가합니다 css 파일 로드 및 이미지 관련 html 태그 추가 아래와 같이 js 호출 및 jquery 스크립트 추가 웹브라우저로 출력시 아래와 같이 출력된 결과를 확인할 수 있습니다 css/style.css 파일을 통해 효과조절을 할 수 있으니 작업자분게서는 활용하시면 좋을듯 합니다