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

안녕하세요 해피CGI 입니다. 해피 재능마켓 솔루션 A타입 Ver2.3 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다. 감사합니다.

웹페이지의 접속자가 로봇이 아닌 경우 컨텐츠를 제공하기 위한 일종의 Captcha 입니다. 퍼즐 모양의 조각난 이미지와, 퍼즐이 들어가야할 위치를 마우스를 이용하거나, 모바일기기의 터치를 이용해서 끌어다 마추는 식으로 로봇이 아니라는 것을 알아내는 식으로 됩니다. PC에서는 아래 화살표를 마우스로 클릭해서 끌어다 퍼즐이 있는 위치에 놓는 식으로 가능하고, 모바일기기에서도 화살표를 터치해서 끌어다 제자리에 가져다 놓는 식으로 이용이 가능합니다. 퍼즐의 위치가 맞으면 로봇이 아님을 검증하고, 다음 페이지로 이동을 시켜줍니다. 끌어다 놓은 퍼즐의 위치가 제자리가 아니면 위 그림 처럼 틀렸다는 표시와 함께 재시도를 하도록 그림과 퍼즐의 위치가 리셋이 됩니다.

다른 다양한 변환컨버터도 있으나 웹디자인시 가장 많이 사용할만한 변환기로는 jpg나 png 파일을 svg 로 변환해주는 기능일듯하네요. (혹은 ico 로 변경하여 파비콘을 만드는 용도로도 이용하면 편리합니다.) 이용방법은 간단합니다. 파일선택 을 클릭하여 변환하고싶은 파일을 선택하여 업로드합니다. 업로드할 파일은 다중으로 선택이 가능하니 다수의 이미지를 변환하고 싶을 경우 위 처럼 다수의 파일을 선택하여 업로드하세요. 등록된 파일은 개별로 파일 하나하나 다른 객체로 변환하거나 다수로 일괄 변환이 가능합니다. 변환이 완료되면 아래와 같이 변환된 파일을 다운로드 받을 수 있습니다. svg 의 경우 백터용 이미지여야만 문제없이 변환된 이미지로 변환되므로 각각 변환될 속성에 맞게 원본 이미지를 최적화 하여 업로..

앱 이름부터 타이틀, 디스크럽션, 프로모션 설명 등 app 스토어로 등록시 필요한 정보를 대입하여 입력할 수 있습니다. 가장 좋은 장점으로는 글자수를 체크할 수 있는 것입니다. 그리고 실제 반영될 앱스토어 화면에서 입력된 내용이 그대로 출력되어 현재 입력하는 정보가 어디에 출력중인지 알 수 있습니다. 또한 이미지도 업로드 할 수 있어 앱 등록시 최적 사이즈를 계산하여 썸네일을 제작후 적용할 수 있습니다. appstore 로 등록하기전 어떤 상황이 있을지 미리 볼 수 있어서 처음 이용하시는 분들이나 앱을 등록하시고자 하는 분들께 아주 유용할 듯 하네요.^^

* javascript FormPersistence HTML 양식 데이터를 보존하기위한 간단한 JavaScript 라이브러리 * License MIT License * 이용방법 첨부된 압축파일을 해제하여 원하는 웹경로에 업로드합니다 작업해야될 html 문서안에 아래와 같이 배포된 js,css 를 삽입합니다 그리고 적용할 폼태그를 구성하여 각각 id 값을 선언해줍니다 위와 같이 폼 구성을 하고 웹으로 실행하면 각 input 박스에 항목을 입력하고 Add 버튼을 클릭하면 아래와 같은 결과를 확인하실 수 있습니다 form-persistence.js 에 사용되는 스크립트 함수의 옵션등에 대한 API정보는 아래의 API문서 페이지에서 확인이 가능합니다 https://github.com/FThompson/FormP..

* jquery fancyTable fancyTable은 html 테이블을 검색하고 정렬 할 수 있도록하는 jQuery 플러그인입니다. * License MIT License * 이용방법 첨부된 압축파일을 해제하여 원하는 웹경로에 업로드 합니다 css 를 아래와 같이 호출합니다 테이블 html 태그를 구성합니다 (jquery 를 통해 tbody 태그에 테이블 내용이 삽입됩니다) 구성에 필요한 js 파일 및 코드를 삽입합니다 위와 같이 적용된 jquery 를 통해 아래와 같이 테이블 내용이 삽입되고 정렬됨을 확인할 수 있습니다 첨부된 압축파일에도 샘플 파일이 있으니 참고하시면 도움이 되실겁니다 ​ ​

피그마는 2016년 출시 이후 강력한 디자인 플랫폼으로서 자리를 잡아 나가고 있습니다. 브라우저 기반의 프로그램으로서 업데이트의 어려움이나, 화면을 동기화하거나, 다른 팀원들과의 작업 상의 문제를 손쉽게 해결할 수 있는 특징을 지니고 있는 프로그램입니다. 특히 실시간 협업 기능은 피그마가 가장 자랑하는 기능 중 하나로서 여러 플랫폼에서 사용이 가능함과 동시에 러닝커브가 굉장히 낮은 것을 특징으로 합니다 자세한 내용은 데모링크를 통해서 무료사이트 및 내용을 확인하실 수 있습니다. ^^

다양한 옵션으로 아바타를 만들수 있습니다. 일일이 선택하기 어려우면 랜덤으로 생성도 가능합니다. 생성된 아바타는 위처럼 이미지 태그 혹은 SVG 파일로 다운로드 가능합니다. 아바타 이미지가 필요할때 유용한 사이트 입니다. ​ ​ ​

추억의 mp3 플레이어 프로그램 입니다. 한땐 참 많이도 사용했던 프로그램이였고, 여러 오픈 라디오 방송도 참 많이 들었던 추억의 프로그램 입니다. 윈앰프의 기능이 웹에 그대로 구현 되어있습니다. 사이트에 방문하셔서 한번 체험해 보시는게 좋을것 같습니다. 현재 윈앰프는 공식적으로는 윈도우 10 에서는 사용 불가능 합니다. http://www.mywinamp.com/winamp-for-windows-10-download/ 팬들이 만든 비공식으로 윈도우 10 에서 사용할수 있으니 한번 사용해 보시기 바랍니다.

다운로드 받은 파일의 압축을 해제한 후, index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 여러줄로 구성된 텍스트를 일부만 화면에 표시해주고, 표시되는 끝 부분에 read more 버튼을 표시해줍니다. 더 보기 버튼을 클릭하면, 나머지 텍스트를 화면에 스르륵 표시를 해주는 jquery 플러그인 입니다. 사용법은 아래와 같습니다. 1. jquery 와 더보기 플러그인을 로드합니다. 2. 텍스트가 출력되어야 할 블록을 연결하고, 몇줄을 자르고 표시할지를 지정합니다. 3. 더보기 버튼을 클릭하면 화면에 나머지 텍스트를 표시하는 효과를 주려면 텍스트를 출력하는 블록에 data-controller 이라는 속성을 추가하고, 버튼과 연결하면 됩니다. 4. 더보기 버튼을 조절하거나, 더보기 할 텍..