jsfiddle
jsfiddle는 웹 상에서 자바스크립트, HTML, CSS 코드를 입력하고 그 결과를 확인해볼 수 있는 도구입니다. 클라우드 IDE라고 부르기도 하는군요.
개인적으로 쓰기에는 4분면 공간이 부족하지 않은데 스터디나 강의 등에서 누군가에게 보여줄 경우에는 공간이 모호할 수 있습니다. 이럴 경우에는 Embed 기능을 활용할 수 있습니다.
예를 들어 2차 SVG 시간에 샘플로 보여준 데모를 보죠.
https://jsfiddle.net/oveRock/wqocobq0/
그냥 이 주소로 들어가면 아래와 같이 보이죠. 아래 같은 경우에는 코드가 많지 않으니깐 크게 불편함은 없습니다. 하지만 자바스크립트 코드가 많아져서 확인할 코드가 많아지면 불편해지는거죠.
하지만 Embed 기능을 사용하면 아래와 같이 넓은 화면에서 코드를 볼 수 있습니다. 사실 4분면 공간을 탭으로 나누고 약간의 스타일만 더해준겁니다. 기존 주소에 embedded/js,html,result/dark/
이렇게 추가만 해주면 됩니다. 원하는 코드만 보일 수 있으니 화면 확대를 해도 불편하지 않습니다.
https://jsfiddle.net/oveRock/wqocobq0/embedded/js,html,result/dark/
물론 원래 기능은 특정 페이지 내에 코드를 삽입하는 기능입니다만... 이렇게 데모로 사용할 경우에 유용하게 쓸 수 있습니다. 기타 옵션은 아래 링크를 참고하세요. 아~ 실제 기능은 업데이트되었는데 문서는 아직 이전 상태네요. ㅠㅠ