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

Bootstrap 기반 아코디언 메뉴 아이오닉 스타일 예제 입니다. HTML 삽입 미리보기할 수 없는 소스

Bootstrap에서 제공해주는 Bootstrap Icon을 사용하는 예제 입니다. 정의 되어 있는 아이콘들은 아래 사이트에서 확인가능합니다. https://icons.getbootstrap.com/ Bootstrap Icons 사이트에서는 CDN 주소를 제공하고 있습니다. Bootstrap Icons 라이브러리를 추가하고 i Tag를 선언해서 사용하는 법과 SVG를 선언하여 사용하는 방법 2가지를 제공하고 있습니다. i Tag를 선언해서 안보이는 아이콘들이 있는데.. SVG를 사용하는 방법으로 사용하시면 됩니다. HTML 삽입 미리보기할 수 없는 소스

CSS 에서 동적으로 변수를 할당하여 그 하위에서 사용하는 방법으로 구성된 예제 입니다. CSS 에서 --[변수 이름] 으로 선언하고 그 하위에서 var(--[변수 이름]) 으로 가져와서 사용하면 됩니다 HTML 삽입 미리보기할 수 없는 소스

html5 canvas tag를 사용하여 눈 내리는 효과 배경을 만드는 예제 입니다. 기본적으로 배경이 흰색으로 되어 있는데 이것은 cavas tag에 background-color 속성을 이용하여 변경 가능합니다. HTML 삽입 미리보기할 수 없는 소스

유튜브 영상으로 배경을 만들어주는 라이브러리인 YTPlayer를 사용하는 예제 입니다. https://github.com/pupunzi/jquery.mb.YTPlayer 에서 사용 가능한 많은 옵션들을 확인할 수 있습니다. GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery framework use a custom yutube player for a video as background on jQuery framework - GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as backgroun..

html5 에서 마우스를 따라다는 효과를 만들 수 있는 라이브러리 입니다. TweenMax 라는 라이브러리 이며 아래와 같이 사용 할 수 있습니다. 사용 하고 싶은 영역에 position: absolute; 를 선언하는 것이 중요합니다. 또는 position: fixed; 를 사용하여 선언되어야 합니다. HTML 삽입 미리보기할 수 없는 소스

요즘은 모니터 해상도 및 크기가 너무 커지면서 홈페이지 디자인을 고려할 사항이 더 많아 졌습니다. 네이버의 경우에도 모니터 화면이 아무리 가로로 크게 늘어나도 모니터 중간에 일정 사이즈를 고정 시켜서 유지하고 있습니다. Bootstrap 을 이용하여 네이버 처럼 화면 중간 고정 화면을 만드는 예제입니다. non-reponse css의 경우 bootstrap3.4 에 최적화된 버전만 있는 듯 합니다. HTML 삽입 미리보기할 수 없는 소스