JSFiddle을 사용하여 HTML, CSS, 스크립트 등을 테스트한다. 예로 나는 JSFiddle에서 아래와 같은 부트스트랩4의 캐러셀(Carousel)이라는 것을 테스트한 적이 있다. 부트스트랩4의 여러 가지 기능을 보고자 할 때 JSFiddle을 이용한다. 이 블로그에서도 할 수 있지만 이 블로그는 부트스트랩3으로 만들어 불가능하다. 




하여튼 JSFiddle은 소스를 퍼가도록 하는데 티스토리 블로그는 자바스크립트를 지원하므로 글에 삽입이 가능하다. 티스토리를 제외한 네이버, 다음, 이글루스 모두 안될 것이니 개고생하지 말았으면 한다. JSFiddle을 삽입하면 소스를 멋지게 표현하고 방문자가 쉽게 소스를 퍼갈 수 있다. 또한 결과도 보여준다. 여러 모로 JSFiddle은 편리하다.  



과거에 JSFiddle을 사용했는데 최근에 전 후 편집 사진을 나오게 하는 스크립트를 적용하다가 CodePen을 사용하기로 했다. 왜냐하면, 다른 사람은 모르겠는데 나에겐 JSFiddle보다 CodePen이 사용하기가 편리했기 때문이다. 저장한 것을 퍼올 경우 결과가 화면에 나오면 좋았는데 CodePen인 경우 결과가 나와 좋았다. 아래는 내 CodePen에서 퍼온 사진 편집 전과 후 스크립트다. 참고로 CodePen도 JSFiddle처럼 HTML, CSS, 스크립트를 테스트하는 서비스를 제공한다고 알고 있다.


See the Pen 슬라이더 by 백전백승 (@jskimmin) on CodePen.


예로 구 에디터(이전 에디터)에 스크립트를 삽입하면 영역이 보여 좋았다. 아래 그림은 CodePen 스크립트를 글에 삽입한 경우다. 보듯이 삽입한 영역을 알 수 있으니 아주 편하다. JSFiddle을 삽입하면 에디터의 HTML 옵션을 선택한 후 코드를 보면서 영역을 봐야 하는 불편함이 있었다. 참고로 신 에디터는 스크립트를 삽입하면 영역으로 나온다. 





아래는 JSFiddle로 CodePen과 JSFiddle 모두 이 글에서 봤다. 아래에 나온 것은 부트스트랩 버전 3이 아닌 4의 기본 Carousel로 이 블로그에 메인 등에서 볼 수 있는 것은 3이다. 위에서 적었듯 에디터에서 HTML 옵션을 CodePen은 영역을 선택할 필요없이 알 수 있지만 JSFiddle을 삽입하면 HTML 옵션을 선택해서 봐야 한다. 참고로 신 에디터를 사용하면 영역이 나온다. 



걱정이 JSFiddle을 사용할 때 제한이 전혀 없었는데 CodePen은 무료로 사용하기 제한이 있는데 어떨지 모르겠다. 유료로 업그레이드 하여 무료의 제한을 보니 그렇게 나에게 불편함을 안겨 줄 제한은 없는 것 같다. 꾸준히 사용해 보면 알 것이다. 제한이 느껴진다면 다른 대안인 JSFiddle를 사용하는 수 밖에 없다.  

'정보/스크립트.HTML.CSS' 관련된 글