온라인상에서 웹개발 및 테스트, 공유가 가능한 서비스가 있다.


바로 jsFiddle 이다.



단순한 회원가입 과정을 거치면 다음과 같은 화면이 나온다.



Create a new Fiddle 버튼을 누르면 자기만의 프로젝트를 하나 만들 수 있다.

  • 4개로 나뉜 에디터가 나타나고 각각 HTML, CSS, Javascript 를 입력 할 수 있고, Result 창에서는 결과를 볼 수 있다.
  • HTML 을 입력할때에는 HTML 태그를 비롯하여 META 태그, HEAD 태그, BODY 태그는 없어도 된다.
    • 창에 보이는 CSS, Javascript 에디터의 소스는 기본적으로 HTML 소스에 반영이 된다.
    • 외부 Javascript, CSS 소스는 좌측에 External Resources 버튼을 클릭하여 링크를 걸어줄 수 있다.



상단메뉴

  • Run
    • 현재 프로젝트를 실행하는 버튼으로 우측하단에 Result 화면에서 확인 할 수 있다.
  • Debug on Mobile
  • Save
    • 현재 프로젝트를 저장하여 다른사람과 공유 가능하다.
    • Save 를 하면  Update, Fork, Share 메뉴가 더 생긴다.
      • Update
        • 현재 프로젝트를 Update
      • Fork
        • 현재 프로젝트를 Fork
      • Base
        • Base 프로젝트로 이동
      • Share
        • 다른사람에게 현재 프로젝트를 공유가능
  • TidyUp
    • Editor 의 Indentation 을 정렬해주는 버튼
  • JSHint
    • Javascript Validation


좌측 네비게이션

  • jsFiddle Settings Sidebar Document
  • Frameworks & Extensions
    • jQuery, jQuery Mobile, YUI 등 다양한 외부 라이브러리를 적용한 프로젝트를 구성 할 수 있다.
    • onLoad, onDomready 등의 함수를 overloading 가능하다.
  • Fiddle Options
    • Title, Description
      • jsFiddle 에서 보여지는 Tilte bar, Description 을 수정 할 수 있다.
    • Normalized CSS
      • 기본 CSS 인 normalized.css 적용여부
    • Body Tag
      • body 에 class 등을 적용하는 등의 customizing 가능
    • DTD
      • HTML5, XHTML, HTML4 등의 DTD 설정
    • Freamwork <script> attribute
  • External Resources
    • 외부 Resources 의 URI 를 포함 할 수 있다.
  • Languages
    • 다음과 같이 다양한 웹언어지원
    • HTML, CSS, SCSS, JavaScript, Coffeescript, JavaScript 1.7
  • Ajax Requests
    • Ajax 를 통한 json 등의 시뮬레이션이 가능한 기능으로 보인다.
  • Example
    • 다양한 자바스크립트 라이브러리 예제를 제공한다.



Posted by leechwin
,