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

데모는 다운로드 받은 파일의 압축을 해제한뒤,demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.이미지 위에서 마우스를 드래그하면,빨간색 네모박스가 생기고, 선택한 크기만큼 이미지를 자를수 있습니다.선택한 크기를 늘리거나, 줄이거나 할수도 있네요.사용방법은 아래와 같습니다.

W3C(w3.org)에서 제공하는 RSS 피드 유효성 검사 사이트를 소개합니다.사이트 접속 후 [Validate by URI] 탭을 클릭하여 RSS 피드의 URL을 입력하거나[Validate by Direct Input] 탭을 클릭하여 RSS 피드 소스 코스를 직접 입력할 수 있습니다. 입력 후 [Check] 버튼을 클릭하면 아래와 같이 유효성 검사 결과를 표시해 줍니다.Congratulations! 문구가 나오면 유효성 검사에 통과하였으며, RSS 피드가 정상 작동한다는 뜻입니다.만약 아래와 같이 Recommendations (권장사항) 항목이 출력된다면소스 코드 라인과 설명을 참고하여 수정 작업을 하시는 것이 좋습니다.

- 설명올캡(AllCap) 프로그램은 원하는 캡쳐 영역지정, 여러 저장 파일 포맷지원, 단축키 설정변경, 캡쳐 후 메모 편집, 웹페이지 이미지 저장 , 동영상 Animated Gif(움짤) 저장이 가능한 프로그램입니다.저는 해피CGI 자료를 등록할 때 작동 예시 등을 만들 때 사용하고 있습니다.- 사용방법압축파일을 다운로드 받은 후 압축을 해제하고 아래 파일을 실행합니다.설치는 하지 않고 동일한 경로에 설정 파일(ini)만 생성이 되고 실행됩니다.프로그램을 실행하면 아래와 같이 설정 창이 먼저 보이는데,이 설정은 웹사이트 캡쳐에 사용되는 설정입니다.움짤을 제작하기 위해서는 작업표시줄 트레이 아이콘에 우측 마우스를 클릭해서 [움짤 만들기]를 클릭해 줍니다.움짤 만들기 실행시 아래와 같이 캡쳐할 영역을 지정..

js 를 받아 위의 샘플 코드처럼 사용하시면 됩니다.만약 커뮤니티 사이트에Ctrl + F 누르면 자유게시판Ctrl + J 누르면 중고장터이렇게 단축키로 이동가능하게 만들 수도 있을 것입니다.그외에 여러 활용방법도 무궁해보이니 관심 있으신 분들은 추천 드립니다.

사이트에 접근하시면 상단에 다운로드 버튼이 있습니다.이 버튼으로 js 를 받아 사용하시면 됩니다. 용량도 1.14kb 로 굉장히 작은 용량 입니다.형변환도 지원하며, add 를 사용하여 더하기 도 지원 합니다.소수점 자리수도 지원하니, 가격표등에서 유용하게 사용가능한 js 입니다.

TickWatch는 복고풍 7세그먼트 시계와 비슷한 사용자 정의 카운트다운이나 카운트업 타이머를 만드는 작은 jQuery  플러그인 입니다.  이 플러그인은 타이머를 만들고 관리하기 위한 여러 옵션, 방법 및 이벤트를 제공합니다.타이머를 설정하여 위아래로 세고, 시작 및 종료 시간을 지정하고,시계 세그먼트의 모양을 사용자 지정할 수 있습니다. 이러한 유연성과 사용자 정의 가능성으로 인해TickWatch는 이벤트 카운트다운, 게임 타이머 또는 애플리케이션의 경과 시간 추적을 포함한 다양한 웹 프로젝트에 적합합니다. 시작 버튼을 누르면 정해놓은 시간에서 1초씩 줄어드는 카운트 다운이 되게 됩니다.사용방법은 아래와 같습니다.다운로드 받은 파일의 압축을 해제한뒤,index.html 파일을 웹브라우저로 열어보면 ..

클릭시 에니메이션 효과와 함께 탭메뉴가 변경됩니다.라디오 버튼을 이용한 탭메뉴 소스입니다.라디오 버튼과 has() 선택자를 이용한 에니메이션 탭 효과입니다.첨부된 파일을 다운로드 하거나 데모 사이트에서 전체 소스를 확인 할 수 있습니다.

선택시 라디오버튼 뿐만 아니라 포커스 되는 디자인이 시간차 에니메이션으로 효과가 적용됩니다.관련 에니메이션 소스입니다.css로 구현되어 있습니다.

안녕하세요 해피CGI 입니다. 해피 웹툰/웹소설 솔루션 Ver1.4 로 업그레이드 되었습니다.  자세한 사항은 아래의 내용을 참고하시기 바랍니다.

GSAP을 이용한 이미지 슬라이드입니다.스크롤하거나 버튼을 클릭하여 순서를 변경할 수 있고 무한으로 슬라이드됩니다.사이트를 구성할 때 다양한 방식으로 사용하기 좋습니다.  HTML 구조 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Prev Next  CSS 소스* { box-sizing: border-box;}body { background: #111; min-height: 100vh; padding: 0; margin: 0;}.gallery { position: absolute; width: 100%; height: 100vh; overflow: hidden;} .cards { position: absolute; width: 14rem; height: ..