| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
- 해피씨지아이
- 게시판
- #해피CGI
- #쇼핑몰
- #홈페이지제작
- 이미지
- 해피CGI
- happycgi
- 사이트제작
- #이미지
- #image
- #jQuery
- 홈페이지
- 솔루션
- CSS
- 홈페이지제작
- 웹솔루션
- javascript
- #CSS
- #뉴스
- #솔루션
- #cgimall
- jquery
- #업종별
- #happycgi
- php
- #홈페이지
- #웹솔루션
- CGIMALL
- #동영상
- Today
- Total
목록해피CGI (4081)
웹솔루션개발 26년 노하우! 해피CGI의 모든것
홈페이지 제작, 시작하기 전에 준비할 것들
홈페이지 제작을 준비할 때 가장 먼저 떠올리는 것은 보통 디자인입니다.어떤 색상을 사용할지, 메인 화면을 어떻게 구성할지, 어떤 이미지를 넣을지부터 생각하기 쉽습니다.하지만 실제 홈페이지 제작에서는 디자인보다 먼저 정리해야 할 것들이 있습니다.홈페이지를 왜 만드는지, 어떤 기능이 필요한지, 어떤 방식으로 제작할지, 누가 운영하고 관리할지 등을 미리 정하지 않으면 제작이 시작된 뒤 수정사항이 계속 늘어나고 일정과 비용도 함께 증가할 수 있습니다.특히 회사소개 홈페이지처럼 비교적 단순한 사이트와 회원·결제·관리자 기능이 필요한 서비스형 홈페이지는 준비해야 하는 범위가 크게 다릅니다.그래서 홈페이지 제작을 시작하기 전에는 전체적인 방향을 먼저 정리하는 과정이 필요합니다.이번 글에서는 홈페이지 제작 전에 확인하..
[해피CGI][cgimall] ElevenLabs - 자연스러운 AI 음성, 이미지, 영상 생성 서비스
# 특징 ElevenLabs는 텍스트를 입력하면 AI가 자연스러운 음성으로 읽어 주는 음성 생성 플랫폼입니다.단순한 기계음이 아니라 억양, 감정, 속도, 말투가 비교적 자연스럽게 표현되는 것이 특징입니다. 주요 기능으로는 텍스트 음성 변환, 음성 복제, 음성 변조, 보이스 디자인, 더빙, 효과음 생성, 음악 생성, 이미지·영상 생성 기능 등이 있습니다. 특히 70개 이상의 언어를 지원하며, 한국어를 포함한 다양한 언어의 음성 콘텐츠 제작에 활용할 수 있습니다. 또한 웹에서 바로 사용할 수 있는 ElevenCreative, 대화형 음성 에이전트를 만들 수 있는 ElevenAgents, 개발자가 서비스에 음성 기능을 연동할 수 있는 ElevenAPI를 제공합니다. # 장점 ElevenLabs의 가장 큰 장점..
[해피CGI][cgimall] Responsive Flip Pricing Table 반응형 플립 가격표
3D 카드 뒤집기(Flip Card) 효과를 이용한 가격표 UI입니다.사용자가 카드를 클릭하거나 호버하면 앞면에서 뒷면으로 180° 회전하며 추가 정보를 보여주는 방식입니다.상단 월간 년간 라디오 버튼을 클릭하면 플립 애니메이션 효과와 함께 가격표가 전환됩니다.애니메이션 css 소스입니다.(일부)애니메이션 js 소스입니다.(일부)첨부파일을 다운로드 받으시거나 해당 사이트에서 html,css,js 전체 소스를 확인할수 있습니다.
[해피CGI][cgimall] Gradient Button Animations 그라디언트 버튼 애니메이션
마우스호버시 그라디언트 애니메이션 효과가 있는 버튼입니다.버튼 그라디언트 소스입니다.버튼 애니메이션 소스입니다.첩부파일 또는 해당 사이트에서 전체 소스를 확인할 수 있습니다.
[해피CGI][cgimall] 그리드 재배치 애니메이션CSS
그리드 카드의 위치가 바뀔 때 CSS만으로 부드러운 이동 효과를 구현한 예제입니다.JavaScript 없이 레이아웃 변화에 따른 애니메이션을 적용할 수 있습니다.카드 목록, 갤러리, 대시보드 UI의 전환 효과를 만들 때 참고하기 좋습니다.HTML 구조 CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTEN..
[업그레이드] 해피 LMS 환급형 웹솔루션 Ver1.1로 업그레이드 되었습니다
안녕하세요 해피CGI 입니다.해피 LMS 환급형 웹솔루션 Ver1.1로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다.
[해피CGI][cgimall] GSAP 탭 콘텐츠 애니메이션(Tab content toggle)
탭을 클릭하면 선택한 콘텐츠가 부드럽게 전환되는 UI 예제입니다.SplitText를 사용해 텍스트를 줄 단위로 나누고, GSAP 애니메이션으로 자연스럽게 등장시킵니다.단순한 탭 메뉴보다 시각적인 효과가 좋아 랜딩페이지나 소개 섹션에 활용하기 좋습니다.텍스트 중심의 콘텐츠 전환 효과를 구현할 때 참고하기 좋은 자료입니다.HTML 구조 CSS 소스* { box-sizing: border-box;} body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f4f4f0; font-family: Inter, sans-serif; font-size: 16px;} .tabs-demo { width: ..
[해피CGI][cgimall] 마우스 오버하면 서치 영역이 나타나는 애니메이션 버튼 Animated Search Box
마우스 오버하면 서치 영역이 나타나는 애니메이션 버튼입니다.동적인 효과를 줄 수 있어서 유용한 효과입니다. HTML 구조 CSS 소스body { background: #212129;} ::selection { background: #212129;} .search-wrapper { position: absolute; transform: translate(-50%, -50%); top:50%; left:50%;}.search-wrapper.active {} .search-wrapper .input-holder { height: 70px; width:70px; overflow: hidden; backg..
생성형 AI를 이용한 홈페이지 제작의 한계, 어디까지 가능할까?
생성형 AI를 이용한 홈페이지 제작의 한계, 어디까지 가능할까?생성형 AI의 발전으로 홈페이지 제작은 이전보다 훨씬 쉬워졌습니다. 원하는 홈페이지의 분위기나 구성을 설명하면 AI가 디자인을 제안하고 HTML, CSS, JavaScript 등의 코드까지 빠르게 생성해 줍니다. 최근에는 단순한 코드 생성을 넘어 실제 화면을 확인하면서 수정하는 것도 가능해졌습니다. 간단한 회사소개 페이지나 랜딩페이지라면 짧은 시간 안에 상당한 수준의 결과물을 만드는 것도 가능합니다.그렇다면 이제 사업에 사용할 홈페이지도 생성형 AI만으로 충분히 만들 수 있을까요? 결론부터 말하면 홈페이지를 '만드는 것'과 실제 서비스가 가능하도록 '완성하는 것'은 조금 다른 문제입니다. 생성형 AI는 홈페이지 제작을 빠르게 시작할 수 있다..
[해피CGI][cgimall] 클릭하면 다운로는 되는 애니메이션 Download Animation (SVG)
클릭하면 다운로는 되는 애니메이션을 재밌게 표현한 소스입니다. 다양한 상황에 응용 가능합니다. HTML 구조 0 % Reset a href="https://dribbble.com/shots/2939772--Daily-UI-Download" target="_blank" class="icon-link"> img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-i..