일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #동영상
- 사이트제작
- #image
- #홈페이지제작
- 쇼핑몰
- #해피CGI
- #솔루션
- #jQuery
- happycgi
- 해피CGI
- #쇼핑몰
- 웹솔루션
- CSS
- #이미지
- javascript
- 해피씨지아이
- #업종별
- #cgimall
- 홈페이지
- jquery
- php
- CGIMALL
- #happycgi
- 게시판
- #뉴스
- #홈페이지
- #CSS
- 홈페이지제작
- 솔루션
- #웹솔루션
- Today
- Total
목록2021/05 (29)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
HTML5 를 이용하여 음원을 재생하는 오디오 플러그인 입니다. 자체 기능을 사용하여 만들어진 것 같진 않습니다. 이유는 플레이어 코드를 봤을때 JPLAYER 를 사용한 흔적이 보입니다. js/zen.js 파일을 보니 확실하네요. jplayer 를 이용한 거군요. 하지만 디자인을 이쁘게 만들어놨네요.^^ 그래서 있는 기능 그대로 사용하실 경우 괜찮다 생각 합니다. 기능을 추가하여 사용하고자 하시는 경우 JPLAYER 를 참고하셔서 커스터마이징 하면 됩니다. Developer Guide 는 아래의 링크를 참고하세요. http://jplayer.org/latest/developer-guide/
HTML5 의 audio 태그를 이용하여 음원을 재생하는 플러그인 입니다. HTML5 를 브라우저가 지원되지 않는 브라우저는 자동으로 FLASH를 이용합니다. 기본 AUDIO 태그를 사용하면 브라우저별 플레이어 디자인이 다르게 출력됩니다. 이를 표준 CSS 로 스타일을 지정할 수 있는 모든 브라우저에는 동일한 UI로 출력되도록 해 두었습니다. 라이센스 : MIT 라이센스 사용법 안내 입니다. audio.js, player-graphics.gif& audiojs.swf를 같은 폴더에 넣습니다. 해더에 스크립트를 호출 합니다. 컨테이너를 초기화 합니다. AUDIO 태그를 원하는 위치에 적용하시면 됩니다. ※특이사항 AUDIO 태그는 원래 autoplay 속성을 통해 자동 재생을 가능했습니다. 하지만 chro..
텍스트에 마우스를 올리면 글씨 및 영역이 기울어져 종이가 접힌듯한 효과를 보여줍니다. 소스를 확인해보시면 transform 의 skew 스타일을 이용하여 글씨 및 영역을 기울이며, box-shadow를 주어 입체감을 준 것을 확인해보실 수 있습니다. [html 소스] [주요 css]
이진수 2개나, 10진수인 2개의 숫자를 합산한 숫자를 표시해주는 애니메이션 계산기 입니다. 다운로드 받은 파일의 압축을 해제한 뒤, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 파일을 웹브라우저로 열어서 보면, 위 그림과 같은 화면이 표시가 됩니다. 최대 8bit인 이진수 2개를 이용해서 합산된 숫자를 표시해주는 계산기입니다. 각 자리수의 숫자를 클릭해보면 0 과 1로 변환이 되고, 두 2진수를 더한 결과가 밑줄 아래에 표시가 됩니다. 위 그림은 10진수 2개를 더한 숫자를 표시해줍니다. 10진수 계산기는 다양하고 많고, 2진수 계산기도 찾으면 있긴 하지만 교과서에서나 나올법한 그림과 같은 인터페이스로 된 건 드무네요.
텍스트에 마우스가 올라가면 우측 이미지처럼 텍스트가 계단을 타고 미끄러져 오르는 듯한 효과를 볼 수 있습니다. 소스를 살펴보면 transform의 skew를 이용하여 계단 모양을 만들고 마우스 올릴 시 transform: translate(0, -50px); 스타일을 통해 각 영역의 글자를 위로 올리는 것을 확인해보실 수 있습니다. [html 소스] [주요 css]
다양한 차트 그래프를 출력 가능한 javascript 라이브러리 vis.js 입니다. 네트워크, 타임라인, 3d, 2d 차트등을 지원합니다. https://visjs.org/ 페이지로 접속시 아래와 같이 각 차트의 문서 및 데모를 열람이 가능 합니다. 샘플보기 페이지로 이동시 쉽게 샘플을 볼 수 있도록 미리보기 기능이 제공 되며, 클릭하여 실제 샘플을 볼 수 있습니다. https://visjs.github.io/vis-network/examples/ (네트워크 그래프 데모)
안녕하세요 해피CGI 입니다. - 해피 오픈마켓 솔루션 모바일 Ver3.1 (타입D 장착옵션) 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다. 감사합니다.
안녕하세요 해피CGI 입니다. 해피 오픈마켓 솔루션 타입C Ver5.1 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다. 감사합니다.
안녕하세요 해피CGI 입니다. 해피 오픈마켓 솔루션 타입C Ver5.1 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다. 감사합니다.