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

간단하게 웹페이지 내의 소스코드 하이라이팅을 쉽게 할 수 있는 highlightjs 입니다. highlightjs는 최대 196가지의 언어를 지원합니다. 참고로 이곳에 첨부된 소스 파일은 34종의 언어만 포함된 버전 입니다. 전체 언어에 대한 소스를 다운로드 받으시고자 하신다면 아래 페이지로 이동하여 원하는 언어를 클릭하여 하단의 다운로드 버튼을 통해 다운로드가 가능 합니다. https://highlightjs.org/download/ 혹은 CDN 서비스를 이용 할 수도 있습니다. 사용방법은 https://highlightjs.org/usage/ 페이지에서 확인 하실수가 있으며, 기본적인 사용방법은 간단 합니다. Javascript 와 CSS를 선언하고 하이라이팅이 필요한곳에 태그를 이용 하면 됩니다. ..

키보드 타이핑을 하는 속도와, 정확도를 테스트할 수 있는 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한 뒤, 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 최대값

상품이미지를 확대보기를 원할때 사용하면 좋은 플러그인 입니다. ( jQuery Product Image Gallery with Zoom View on Hover ) 라이센스 : MIT 구성요소 : HTML, CSS, JavaScript(+jQuery) 제공하는 사이트의 샘플은 클릭하지 않은 상태에서 첫번째 이미지에 마우스 오버하면 확대 기능이 작동하지 않습니다. 무조건 클릭해야지만 반응합니다. 그래서 첨부된 파일은 해당 부분 기능을 변경하여 첨부하였습니다. 사용방법은 간단합니다. HTML 코드내에 img 태그로 이미지를 출력시켜주시면 됩니다. 단, 첫번째 이미지에는 id="first_img" 속성만 추가해 주시면 됩니다.

가로로 타임라인을 표현이 가능한 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/ 페이지에 접근시 간단한 샘플을 볼 수 있으며, 샘플 아래쪽에 시작하는 방법을 확인 할 수 있습니다. 상단 메뉴를 통해 자세한 설명 페이지로 이동이 가능 합니다.

vue.js를 이용하여 만들어진 입체적인 카드 입력폼을 확인해보세요. 카드번호, 사용자, 년도 등 정보를 입력하면 상단에 있는 입체 카드에도 입력된 정보가 반영됩니다. [ 카드 번호 입력 ] [카드 사용자 입력] [카드 유효기간 입력] [카드 CVV 번호 입력] 카드 뒤에 있는 CVV 번호를 입력시 카드 뒷면까지 보여주는 등 각 정보를 입력시 직관적으로 정보가 입력되는 부분을 표시해주어 카드 정보 입력을 도와줄 수 있습니다. ^^