일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 솔라나cookbook
- 웹예제
- HTML5
- html5예제
- html5글자효과
- 포트폴리오예제
- NFT솔라나
- nft예제
- html5popup
- html5기초
- html5디자인예제
- html5기초예제
- NFT
- 웹디자인예제
- solanaNFT
- 솔라나NFT
- html5웹디자인예제
- html5웹디자인
- 서버
- 이중화
- 웹디자인
- 솔라나개발
- html5포트폴리오예제
- 솔라나
- grpc
- NFT개발
- 포트폴리오
- html5배경만들기
- pgpool
- PostgresSQL
- Today
- Total
목록html5예제 (7)
Scikit Web
Htm5에서 순수하게 SVG와 CSS로만 동작하는 배경 예제 입니다. HTML 삽입 미리보기할 수 없는 소스 https://www.cssscript.com/animated-waves-svg/#respond Simple Animated Waves With SVG And CSS | CSS Script Use SVG and CSS to make super smooth animated waves that can be used as background to make your website look awesome. www.cssscript.com
캔버스 안에 이미지 태그를 생성하고 마치 포토샵으로 자른것 같은 효과를 주는 예제 입니다. 사실 이렇게 이미지를 자를꺼면.. 포토샵이 더 빠를수 있습니다. HTML 삽입 미리보기할 수 없는 소스
Bootstrap 기반 아코디언 메뉴 아이오닉 스타일 예제 입니다. HTML 삽입 미리보기할 수 없는 소스
html5 의 element(div, label 등)에 애니메이션 효과를 넣어주는 유용한 라이브러리 입니다. https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 무료 라이브러리 이며 사용법도 상당히 간단합니다. 아래 예제와 같이 라이브러리를 추가합니다. 사용가능한 기능들은 라이브러리 홈페이지..
HTML5에서 음원을 재생하기 위해 사용되는 Tag 입니다. Audio Tag 이며 예제 와 같이 선언하여 사용할 수 있습니다. Audio Tag의 활용 가능한 속성들이 많이 있는데 예제와 같이 대표적으로 contorls autoplay loop 가 있습니다. Audio Tag를 이용하여 음원 Player를 만든다고 하면 단순히 위의 기능들만 가지고 만들수가 없습니다. Audio Tag에는 음원이 재생중이거나 일시정지, 음원 재생이 완료가 되었을때 각 상황에 맞는 Event 를 Callback 함수를 이용하여 얻어올 수 있습니다. HTML 삽입 미리보기할 수 없는 소스
현재 진행률을 표시 할때 많이 사용하는 방법입니다. 현재 진행률을 표시할때는 Progressbar 안에 들어가는 글자의 가로 세로 중앙 정렬이 필수 입니다. div 안에 있는 글자를 가로 세로 중앙 정렬 하는 방법이 많이 있지만 저는 display: flex 와 justify-content, align-items 라는 CSS 속성을 이용하여 구현하였습니다. 각각의 아이템에 top, bottom 등의 값도 사용할 수 있어 원하는 위치에 따라 변경하여 사용하면 되겠습니다. HTML 삽입 미리보기할 수 없는 소스