목록happycgi (2268)

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

[해피CGI][cgimall] Naver CLOVA Face Recognition (CFR) - 얼굴 인식 API

네이버 CLOVA 에서 제공하는 얼굴과 관련된 다양한 정보를 제공하는 얼굴 인식 API CLOVA Face Recognition 입니다. https://developers.naver.com/products/clova/face/ 아래와 같은 기능을 이용 할 수 있습니다. 개발 가이드는 아래 페이지에서 확인 가능 합니다. https://developers.naver.com/docs/clova/face/reference
웹프로그램밍 자료실/기타 자료 2023. 12. 1. 09:44
[해피CGI][cgimall] GTmetrix - 웹사이트 로딩 속도 체크

웹사이트의 로딩 속도 테스트 및 분석을 도와주는 프로그램인 GTmetrix 입니다. https://gtmetrix.com/ 페이지를 통해 확인이 가능 합니다. URL을 입력하고 Test your site 버튼을 클릭하면 되는데, 회원가입후에 로그인을 하면 아래와 같이 옵션 변경이 가능합니다. 테스트를 진행하는 나라/국가도 선택이 가능한데, 무료로 제공되는 나라는 홍콩, 런던, 뭄바이, 시드니, 밴쿠버 입니다. 나머지 도시는 유료버전에서만 선택이 가능 합니다. 테스트 URL을 입력하고 테스트를 시작하면 1~4단계 테스트를 진행 하게 되고, 3단계에서 화면 스크린샷이 출력 됩니다. 테스트가 끝이 나면 아래와 같은 결과를 확인이 가능 합니다.
웹프로그램밍 자료실/기타 자료 2023. 11. 29. 09:09
[해피CGI][cgimall] Classic Animated Directory Tree Plugin with jQuery - dTree

dTree는 부드러운 CSS3 전환으로 고전적인 접기/디렉토리/파일 트리 보기 구조를 만들기 위한 간단한 경량 jQuery 플러그인입니다. Cookie는 웹 페이지를 새로 고칠 때 오픈 상태를 기억할 수 있도록 지원합니다. 다운로드 받은 파일의 압축을 해제한 뒤, index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 폴더 아이콘 좌측에 있는 + 를 눌러서 펼쳤다가, 접었다가 할수 있습니다. 펼치고, 접어지고 하는 사이에 애니메이션이 있습니다. 사용방법은 아래와 같습니다. 쿠키를 이용해서, 새창을 열었을때 펼쳐놓은 폴더를 유지시켜줍니다.
웹프로그램밍 자료실/JAVA 자료 2023. 11. 28. 09:13
[해피CGI][cgimall] CSS-only scroll-driven text highlights 스크롤시 텍스트 하이라이트 에니메이션

스크롤시 원하는 문구에 하이라이트가 텍스트 앞에서 뒤로 자동으로 적용됩니다. 원하는 문구에 mark 태그를 삽입합니다. 관련 css 소스입니다. mark 태그에 적용이 됩니다. animation-timeline을 이용하여 시작시점을 정할수 있습니다. 해당 사이트 또는 첨부파일에서 관련소스를 다운로드 받아 소스 확인이 가능합니다.
웹프로그램밍 자료실/HTML 자료 2023. 11. 23. 09:05
[해피CGI][cgimall] 유튜브 썸네일 이미지 가져오기

웹페이지를 제작하다보면 유튜브 영상을 삽입할때가 있습니다. 경우에 따라 썸네일을 보여주고 영상을 링크하는 경우도 있습니다. 이때 해당 유튜브 영상의 썸네일을 가져오는 방법에 대해 안내해 드립니다. 아래 영상의 썸네일을 가져온다고 할때 https://www.youtube.com/watch?v=ARTkK9h5nsI ARTkK9h5nsI 부분이 영상의 고유ID 값입니다. 해당값을 아래 처럼 이미지 주소에 삽입합니다. ARTkK9h5nsI/0.jpg"> 위와 같이 할경우 이미지의 상하에 검은색 여백이 생기고 이미지의 비율도 맞지않습니다. 이미지 경로에 파일명을 변경하여 다른 썸네일을 불러올 수 있습니다. 0.jpg"> 기본 이미지의 상하에 검은색 여백이 생깁니다. mqdefault.jpg"> 검은색 여백이 삭제..
웹프로그램밍 자료실/HTML 자료 2023. 11. 22. 09:05
[해피CGI][cgimall] HTML5 Video and Audio Player Plugin - MediaElement.js

MediaElement.js 는 HTML5 mediaelement API를 기반으로 하는 유연하고 강력한 jQuery/JavaScript 오디오 및 비디오 플레이어 플러그인입니다. MP4, MP3, WebM은 물론 Dailymotion, Facebook, SoundCloud, Twitch, Vimeo 및 Youtube와 같은 거의 모든 오디오 및 비디오 형식을 지원합니다. 데모페이지에 접속해보면, 위 그림 처럼 동영상을 재생하기 위한 샘플 소스를 확인할 수 있습니다. 사용 방법은 아래와 같습니다. mediaelement/docs/usage.md at master · mediaelement/mediaelement · GitHub 위 페이지를 통해서 사용법에 대한 다양한 매뉴얼을 확인해볼 수 있습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 11. 21. 09:20
[해피CGI][cgimall] SVG 메뉴 아이콘을 이용한 애니메이션 메뉴 아이콘

세그먼트를 사용한 SVG 메뉴 아이콘 애니메이션 JavaScript 라이브러리 작동원리, 기본 구성 등 튜토리얼을 따라하면 다양한 효과를 줄 수 있습니다. 탄력적인 SBF 애니메이션을 구현하여 창의적인 효과를 볼 수 있습니다. s s s
웹프로그램밍 자료실/JAVA 자료 2023. 11. 20. 09:27
[해피CGI][cgimall] 개발자를 위한 UI 디자인 작업 시 실용적인 7가지 팁

디자이너가 없는 개발자 위해 실용적인 UI 디자인 작업을 위한 7가지 팁을 알려드립니다. 간단해 보이지만 어려운 가독성 좋은 UI 디자인에 대한 7가지 팁 정보입니다. 전문 디자이너 없이도 충분히 구성할 수 있는 팁이라서 아주 유용하네요. 또한 신입 디자이너들에게도 아주 좋은 자료가 될꺼 같습니다. 감사하게도 번역해주신 자료도 있네요. https://medium.com/@dan_kim/%EB%B2%88%EC%97%AD-%EB%94%94%EC%9E%90%EC%9D%B8%ED%95%A0%EB%95%8C-%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8-%EC%9D%BC%EA%B3%B1%EA%B0%80%EC%A7%80-%ED%8C%81-d60c61329e8b
웹프로그램밍 자료실/기타 자료 2023. 11. 17. 09:08
[해피CGI][cgimall] CSS로 아이프레임 높이 자동 조절

출처 : https://css-tricks.com/fluid-width-video/ CSS만으로 아이프레임 높이를 가로값에 맞춰 자동으로 늘어날 수 있는 코드입니다. 자바스크립트를 사용하지 않고 아이프레임 높이를 조절할 수 있습니다. padding-bottom 부분을 수정하시면 높이를 조절할 수 있습니다. HTML CSS 소스다운로드를 통해 확인해 보실 수 있습니다.
웹프로그램밍 자료실/HTML 자료 2023. 11. 16. 10:05
[해피CGI][cgimall] Text animation

css로 텍스트가 위아래로 이동하는 애니메이션 입니다. HTML Hello world ! bob ! users ! everybody ! CSS body { width: 100%; height: 100%; position: fixed; background-color: #34495e; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 160px; overflow: hidden; font-family: "Lato", sans-serif; font-size: 35px; line-height: 40px; color: #ecf0f1; } .content__container { font-weigh..
웹프로그램밍 자료실/HTML 자료 2023. 11. 16. 09:59
Prev 1 ··· 31 32 33 34 35 36 37 ··· 227 Next