웹솔루션개발 25년 노하우! 해피CGI의 모든것

키보드 타이핑을 하는 속도와, 정확도를 테스트할 수 있는 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한 뒤, index.html 파일을 웹브라우저로 열어보면 간단하게 확인이 가능합니다. 웹브라우저로 열어서 보면 아래 그림과 같은 화면이 표시가 됩니다. 입력박스를 이용해서, 상단에 표시되는 영어 단어들을 타이핑하면 됩니다. 1분이란 시간 동안 몇개의 단어를 타이핑 할수 있는지와, 제대로 타이핑을 했는지와, 정확도가 어느 정도 되는지를 테스트를 해볼 수 있습니다. 틀린 단어는 녹색으로 표시가 안되고, 오타율이 올라가네요. 혹시나 한글도 되려나 싶어서 words.js 소스코드내에 타이핑 테스트를 할 영어 단어들이 저장된 걸 보고 한글로 바꿔봤지만, 예상했던데로, 한글로는 테스트가 되지는 않네요.

다운로드 받은 압축파일을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. index.html 파일을 웹브라우저로 열면, 위 그림과 같은 화면이 나옵니다. 카메라가 있는 부분을 클릭해보면 파일을 선택하는 탐색기가 열리고 이미지 파일을 선택을 해보면, 위 그림과 같이 선택한 이미지 중에 일부를 선택할 수 있는 화면이 표시가 됩니다. 적당히 사용하고 싶은 범위를 지정해서, 우측의 확인 모양의 아이콘을 눌러보면, 원본 이미지에서 선택한 부분만을 잘라서 화면에 표시를 해줍니다. 서버의 자원을 이용해서 업로드 된 이미지를 편집하는게 아니므로, 이미지 파일의 전체 데이터에서 필요한 만큼만 선별해서 입력받기 위한 용도로 활용이 가능해보이네요.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 fixedElemScroll.jquery.js 파일을 로드합니다. 2-1. 고정할 요소를 항상 컨테이너 내에서 볼 수 있도록 합니다. 2-2. 아니면 다른 컨테이너를 기준으로 요소의 위치를 고정합니다. 3. 요소가 하단에 걸렸을 때 부모 컨테이너의 바닥에서 높이 값을 설정합니다. (기본 값 : 0) - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 css 파일, bcPaint.js 파일을 로드합니다. 2. 그림판이 표시될 오브젝트를 추가합니다. 3. bcPaint 플러그인을 호출합니다. 4. 기본 색상이나 컬러셋을 수정할 수 있습니다. - 작동 예제

슬라이더를 이용하여 범위를 설정할 수 있습니다. 싱글, 듀얼 타입과 옵션으로 세로형 슬라이더도 있습니다. 라이센스 : MIT 구성요소 : HTML, CSS, JavaScript(+jQuery) 옵션은 아래와 같습니다. 1. roots : 슬라이더 선택합니다. 2. type : range 또는 빈값으로 선택합니다. range 는 듀얼 빈값은 싱글 3. direction : vertical 또는 빈값으로 선택합니다. vertical 는 세로형 빈값은 가로형 4. rangeValue : minValue 과 maxValue 을 셋팅할 수 있습니다. minValue 최소값 maxValue 최대값

가로로 타임라인을 표현이 가능한 Horizontal Timeline 입니다. https://codyhouse.co/gem/horizontal-timeline/ 페이지로 접속시 데모확인 및 소스 다운로드가 가능 합니다. 데모 페이지 주소는 https://codyhouse.co/demo/horizontal-timeline/index.html 입니다.

Line, Area, Bar, Donut 차트를 제공하는 morris.js 입니다. http://morrisjs.github.io/morris.js/ 페이지에 접근시 간단한 샘플을 볼 수 있으며, 샘플 아래쪽에 시작하는 방법을 확인 할 수 있습니다. 상단 메뉴를 통해 자세한 설명 페이지로 이동이 가능 합니다.

URL 만 입력하면 사이트에 오래된 문법의 JS 파일을 최신으로 변경시 얼마나 빨라지는지 수치화 해주는 사이트 입니다. 자신의 사이트에 얼마나 더 빨라 질수 있는지 점검해보기에 좋은 사이트 같습니다.

javascript 로 제작된 같은그림 마추기 게임 입니다. 시작하기 전에 위 그림 처럼 여러가지 그림을 화면에 보여주며, 시작하게 되면, 그림을 모두 가리게 되며, 같은 그림을 마추면 되는 게임입니다. 몇번을 틀렸는지? 얼마만에 모두 마추었는지를 점수로 계산해 주네요. 자바스크립트를 이용해서 사운드처리 및 사용자의 입력 인터페이스 부분에 대한 좋은 예제가 될수도 있을것 같습니다.

Javascript 를 이용한 Template 입니다. Jacascript 를 이용하여 본문내용을 변경해야 하는 경우 각 항목마다 innerHTML 해야 했는데요. 템플릿 형식으로 사용할 수 있으니 편할듯 합니다. 하지만 프로그램이 복잡해 진다면 배열이 복잡해 질듯 합니다. 지원되는 배열 또한 2차원 배열만 지원되는 듯 합니다. 그래도 잘만 사용하면 좋을듯 하네요 ^^ 라이센스는 MIT V1.1.2 를 따르고 있습니다. ^^