Scikit Web

웹 디자인을 하다 보면 PC 에서 접속 하더라도 모바일 사이즈에 최적화 되어서 보여지게 만들어야 하는 경우가 있습니다. 모바일 화면이 다 다름에도 아무 문제 없이 보이게 할려면 이미 잘 만들어져 있어서 아무 문제가 없는 library를 사용하는 것이 좋습니다. 웹 디자인 또는 웹 개발을 한다면 Bootstrap 이라는 라이브러리의 사용은 필수 입니다. 거의 모든 반응형 UI가 되는 웹 서비스(유/무료)들의 경우에도 해당 라이브러리를 사용 하지 않는 경우는 거의 없습니다. 모바일 사이즈 최적화는 viewport 라는 메타 정보가 반드시 들어가야 합니다. 이번 예제 에서 중요한 부분은 가운데로 정렬시키는 class 입니다. 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 무료 라이브러리 이며 사용법도 상당히 간단합니다. 아래 예제와 같이 라이브러리를 추가합니다. 사용가능한 기능들은 라이브러리 홈페이지..

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

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

jQuery QR Code를 생성하는 라이브러리를 이용하여 QR Code를 생성하는 예제 입니다. 라이브러리가 오래 되긴 했지만... QR Code도 표준 이라서 그런가 지금도 문제없이 동작하고 있습니다. https://larsjung.de/jquery-qrcode/ jQuery.qrcode · generate QR codes dynamically · larsjung.de generate QR codes dynamically larsjung.de 아래 생성하는 예제에서 중요한 부분은 라이브러리 사이트에서 .zip 파일을 다운로드 받으신 후 html file에 import 시켜줘야 됩니다. 라이브러리를 사용할때 중요한 부분은 text 입니다. 해당 부분이 QR Code를 생성하는 주소정보 및 기타 정보를 ..

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 삽입 미리보기할 수 없는 소스

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