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

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 누르면 중고장터이렇게 단축키로 이동가능하게 만들 수도 있을 것입니다.그외에 여러 활용방법도 무궁해보이니 관심 있으신 분들은 추천 드립니다.

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

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

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

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: ..

SVG를 이용한 백그라운드 애니메이션입니다. 색상이 계속 변경되며 동적인 효과를 줄 수 있습니다. CSS 소스* {  margin: 0;  padding: 0;  box-sizing: border-box;} svg {  position: absolute;  top: 0;  left: 0;  width: 100vw;  height: 100vh;  z-index: -1;  transform: translate3d(0px, 0px, 0px);} JS 소스import tinycolor from "https://cdn.skypack.dev/tinycolor2@1.4.2";import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0"; const si..

HTML, CSS 코드를 복사 -> 붙여넣기로 간단한 버튼, 로딩바, input 효과를 적용할 수 있는 사이트입니다.1. 페이지 접속 후 사용하고 싶은 효과 클릭해 줍니다. 2. 사용하고 싶은 효과를 클릭하면 해당 효과의 HTML, CSS 등 코드가 나오는데 코드 복사 버튼을 클릭하여 적용하고 싶은 곳에 붙여넣기를 하면 됩니다.또한 색상을 쉽게 볼 수 있는 Color Picker, 각 효과를 따로 볼 수 있습니다.

테두리를 맞춤으로 설정할 수 있는 사이트입니다.기존 'border:1px dashed #000000' 코드를 사용하면 점 사이의 공간을 조절할 수 없습니다.하지만 해당 사이트에서는 background-image 코드를 사용하여 점 사이의 공간을 줄이거나 늘릴 수 있습니다.1. 사용하고 싶은 테두리를 선택2. 가로, 세로, 획, 점 사이의 공간 등 설정 3. 테두리 색상, 배경색상 설정 4. 만들어진 background-image 코드를 복사하여 붙여넣기 CSS 테두리를 맞춤으로 설정할 수 있는 사이트입니다.