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

무한 스크롤 디자인이 많고 UI 서비스 관점에서도 화면에 어떤 위치에서든지 동작해야 되는 기능들인 경우에도 사용됩니다. HTML의 element(button, div 등) 는 position 이라는 속성을 활용하여 원하는 위치에 생성할 수 있습니다. position 의 경우 큰 영역의 body에서도 동작하지만 부모 자식 관계를 가지는 조건에서도 문제없이 동작을 합니다. 이번 예제는 단순이 화면을 기준으로 스크롤 최상단으로 이동하는 버튼과 처음 생긱는 영역을 기준으로 스크롤을 최상단으로 이동시키는 예제 입니다. HTML 삽입 미리보기할 수 없는 소스

이번에는 특정 영역에서만 동작하는 스크롤을 만드는 예제 입니다. 가로로 스크롤 되는 것과 세로로 스크롤 되는 예제 입니다. html5 CSS 에는 max-width, max-height 가 존재 합니다. 설정 한 크기를 넘어가는 내용을 담게 되면 스크롤이 생기게 하는 예제 입니다. 가로 스크롤을 만들때는 max-width 와 overflow-x 라는 속성을 활용하고 세로 스크롤을 만들때는 max-height 와 overflow-y 라는 속성을 활용하면 됩니다. 이미지를 넣거나 해보면 더 쉽게 동작을 확인할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스

HTML5에서 음원을 재생하기 위해 사용되는 Tag 입니다. Audio Tag 이며 예제 와 같이 선언하여 사용할 수 있습니다. Audio Tag의 활용 가능한 속성들이 많이 있는데 예제와 같이 대표적으로 contorls autoplay loop 가 있습니다. Audio Tag를 이용하여 음원 Player를 만든다고 하면 단순히 위의 기능들만 가지고 만들수가 없습니다. Audio Tag에는 음원이 재생중이거나 일시정지, 음원 재생이 완료가 되었을때 각 상황에 맞는 Event 를 Callback 함수를 이용하여 얻어올 수 있습니다. HTML 삽입 미리보기할 수 없는 소스

html tag에 직접 style 이라는 속성을 이용하여 문자의 컬러 정보를 변경하는 방법입니다. RGBA의 경우 투명도를 값을 지정할 수 있습니다. style에는 color 외에도 많은 값들이 있습니다. HTML 삽입 미리보기할 수 없는 소스

html5 에서 다른 페이지로 이동하는 방법입니다. 다른 페이지로 이동시키는 것을 hyperlink 라고도 합니다. hyperlink를 사용하기 위해서는 href attribute 라는게 있습니다. 아래의 예제 코드는 현재 페이지에서 다른 페이지로 이동하는 예제 입니다. 다른 페이지로 이동 할때 추가적으로 target 이라는 문법을 사용할 수 있습니다. 어떻게 실행 할지에 대한 정의 입니다. _blank = 새창 _self = 현재 _parent = 부모(예: 팝업에서 -> 팝업 생성한 화면) _top = _self 와 비슷 framename = 페이지 안에 있는 특정 div Id HTML 삽입 미리보기할 수 없는 소스

- 요구사항 1. Html5 문서를 편집 및 생성 할 수 있는 개발 툴 VS code, brackets 2. 아래의 코드를 복사 후 .html 파일로 저장 3. 크롬 과 같은 웹 브라우저에 Drag and Drop 으로 결과 확인 HTML 삽입 미리보기할 수 없는 소스