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

다운로드 받은 파일의 압축을 해제한 후, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 축구 필드를 먼저 화면에 표시해주고, 각각의 포지션에 맞는 위치에 사람 그림이 표시가 되고, 해당 포지션에 배치된 선수가 누구인지를 서서히 표시해줍니다. 소스코드를 열어보면 1. jquery.js 와 soccerfield.js 를 로드를 먼저 합니다. 2. 선수의 이름과 포지션에 해당하는 데이터를 준비합니다. 3. 배경이 되는 축구 필드를 표시하는 스크립트를 실행하고, 해당 필드의 크기, 배경용 이미지 외 몇가지 옵션을 조절해서 아래와 같은 코드들을 작성하면 됩니다. 필드에 대한 옵션과, 선수에 대한 옵션이 나누어져 있네요. 모든 선수들이 필드에 표시된 이후에 작동 되는 콜백함수도 만들수..

웹에서 위와 같이 다이어그램을 그릴수 있는 사이트 입니다. 다양한 오브젝트가 많아 이외에도 순서도등 다양하게 그릴수 있습니다. 회원가입을 하지 않아도 그릴수 있고, 회원가입을 하게 되면 그린걸 빼낼수 있습니다. 유료플랜도 있으나 유료로 사용하면 비공개도 가능합니다. 단점은 텍스트 입력란에 한글 입력이 안됩니다. 이외에는 웹에서 즉시 다이어그램을 그릴수 있는 장점이 있는 사이트로 추천드립니다.