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

CSS 그리드를 사용한 레이아웃 템플릿 입니다.디자인 및 페이지 레이아웃 코딩시 유용하게 사용할수 있는 팁입니다.CSS Grid와 최소한의 DOM을 사용하여 필수적인 레이아웃 템플릿 설정을 살펴보고 간단하게 페이지 레이아웃을 잡을수 있습니다HTML 구조 1 2  1 2  1 2 3  1 2 3 4  1 2 3  1 2 3CSS 소스// For more reasons to love grid, check out my article:// @link https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/// Or my additional articles that cover grid:// @link https://moderncss.dev/t..

위의 테이블을 사이즈를 줄이면위와 같이 쉽게 만들어주는 jquery 소스 입니다.변화를 주는 사이즈는 CSS 에서 조절하면 됩니다.이후 스크립트로 merge(병합), move(이동), span 등 으로 조절할 수 있습니다.해당 부분은https://github.com/codefog/restables?tab=readme-ov-file위의 링크에서 잘 설명 되어있으니 참고하시면 되겠습니다.

위와 같이 버튼에 오른쪽 버튼을 누르면 메뉴를 만들어 줄 수 있는 jquery 입니다.사용법은 간단합니다. items 으로 메뉴를 만들고,callback 에서 각 키에 따라 해당 메뉴에 따라 작동하는 스크립트를 작성하면 됩니다.해당 버튼에 다양한 기능을 넣고 싶을때에 오른쪽 버튼을 활용하여 여러 메뉴로 확장하기에 좋은 jquery 로 보입니다.

좌측 버튼 클릭시 사이드메뉴바 출력버튼 클릭시 효과와 관련된 css 소스 일부입니다.

이미지 파일을 base64로 인코딩시 서버에 이미지를 업로드 하지않고 소스 형태로 사용이 가능합니다. 이미지를 드래그 또는 찾기로 업로드 합니다.업로드 하면 인코딩이 진행됩니다.우측 버튼을 클릭해서 결과를 확인하거나 소스를 바로 복사 할 수 있습니다.인코딩 결과를 확인 할 수 있습니다.두가지 형태로 인코딩 소스를 복사 할 수 있습니다.

마우스 오버시 배경색이 들어가고 해당 링크로 갈 수 있는 버튼이 생기게 됩니다.간단한 정보 소개하는 페이지에 유용할거 같습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML https://imgpanda.com/upload/ib/1yIWjyG41o.png" alt="icon" /> https://www.fiverr.com/aliali44">Core Planning Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.  https://imgpanda.com/upload/ib/Q4tSh2ctkH.png" alt="icon" /> https://www.fiverr.com/al..

마우스를 따라 다니는 블랙홀 디자인 입니다.간단한 배경 애니메이션이 필요하실 때 사용 해도 좋을거 같습니다.자세한 내용은 데모에서 확인할 수 있습니다.html

단어, 문장 등 간단한 텍스트 입력으로 음악을 생성해주는 AI 서비스 SUNO다른 음악 생성 AI와 달리 보컬의 음성까지 정확히 생성하며, 오디오 질이 떨어지는 것 빼곤 좋다.기성 음악에 일부 변경을 하는 방식이 아닌 거의 새로운 음악을 생성하며,한번 작업시 10크레딧을 쓰고, 2곡을 생성해주는 방식이다.생성된 음악은 가사까지 포함되며, 벌스로 구분되어 생성된다.모델 버전에 따라 곡의 품질이나, 재생 시간이 다르다.최신 모델의 경우 보컬의 품질도 좋고, 곡 구성도 최대 4분 까지 가능하다.생성된 음원은 MP3, WAV, MP4로 다운로드 가능하다.요금제는 무료 및 유료 2종으로 나뉘며, 무료는 하루에 50 크레딧을 주고 이용이 가능하나, 최신 모델은 사용이 불가하다.유료의 경우 프로, 프리미엄으로 나뉘며..

perplexity 인공지능(AI) 검색 엔진으로 질문을 하면 인터넷을 검색을 해서 대화형식으로 답변을 제공하는 AI 서비스입니다.챗GPT와 비교하자면 둘다 문장 생성 및 대화형 AI 모델입니다.다만,  perplexity는 검색 과 정보 제공에 집중된 AI 서비스입니다. 여러 웹사이트 및 출처를 기반으로 정보르 빠르고 효율적으로검색 및 전달 제공합니다. 검색 기반인거죠.서비스는 무료와 프로 유료로 2가지 입니다.무료는 일 5회 검색제한이며, 프로는 제한 없이 가능하며, 국내 특정 통신사에서 이용권 제공하는 이벤트를 한다고 하네요.프로는 대략 월 20달러 정도입니다. 특정 질문 시 상단에 출처가 표시되는게 참 좋은거 같아요.챗GPT와 비슷한듯 다른  perplexity 괜찮습니다.

좋아요 버튼을 만들 때 사용하기 좋은 애니메이션 효과입니다.응용하여 다양한 예제의 버튼을 만들 수 있습니다.HTML 구조    thumb_up  Follow me on :   facebook /    https://twitter.com/gowriprasanthvm">twitter CSS 소스body{background: #333;}.like-container{filter: url('#filter');  position: absolute;   left: 50%;   top: 50%;   transform: translate(50%, -50%);}.like-cnt{    position: absolute;   cursor: pointer;  left: 50%;   top: 100%;   transform: ..