티스토리로 jsFiddle 소스 코드 공유하기

 티스토리로 jsFiddle 소스 코드 공유하기

jsFiddle에 작성한 코드를 깔끔하게 가져올 수 있는 방법이 있다. 단 이는 HTML을 지원할 경우에만 가능한 방법이므로 HTML을 지원하지 않는 네이버 블로그 같은 경우는 코드 저장 후 브라우저 상단의 주소를 가져오는 방법을 사용해야 한다.

위에 보이는 주소를 가져와서 사용하면 된다.

HTML을 지원하는 티스토리 같은 경우는 Embed 메뉴를 이용해 소스 코드를 가져올 수 있다.

■ 관련글

• html,css,javascript 코딩 테스트를 위한 jsFiddle 사용법

jsFiddle에 로그인을 하고 소스 코드를 작성한다. 그리고 코드를 저장한 후 Embed를 클릭한다. 

클릭하면 EMBED CODE가 나타난다. 이것을 바로 사용하는 것이 아닌 iframe 으로 변경하여 사용할 것이다. 위에 표시된 Prefer iframe을 클릭하여 iframe 으로 코드를 변경한다.

코드가 변경되었으면 이것을 복사한다.

티스토리 글쓰기 화면으로 온다. 여기에서 위에 표시한 HTML 부분에 체크를 한다.

그리고 복사한 소스 코드를 붙여 넣는다.

미리 보기를 하면 jsFiddle 화면이 나오는 것을 볼 수 있다. 그런데 여기에 문제가 있다. iframe 코드를 복사해서 그냥 붙여 넣으면 위처럼 JavaScript가 가장 먼저 보이게 된다. 이것을 실행 결과부터 보이게 하려면 iframe 코드를 수정해야 한다.

복사한 iframe 코드를 보면 src="//jsfiddle.net/jscodedev/h83n5eLx/9/embedded/" 로 표시된 부분이 있다.  embedded/ 뒷부분에  result, html, js, css, resources 를 붙여 순서를 변경할 수 있다.

 
 
1. 기본코드
 
<iframe width="100%" height="300" src="//jsfiddle.net/jscodedev/h83n5eLx/9/embedded/" 
        allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 
2. 순서 변경하기
 
embedded/result,html,js,css,resources
 
result,html,js,css,resources를 원하는 순서로 수정하면 iframe 의 상단 탭부분이 원하는 순서로 변경된다.
 
 
 
 
3. Result가 제일 앞에 나타나도록 순서변경하기
 
 
<iframe width="100%" height="300" src="//jsfiddle.net/jscodedev/h83n5eLx/9/embedded/result,html,js,css,resources" 
        allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
 
4. Result, HTML, JavaScript, CSS만 보이도록 변경
 
<iframe width="100%" height="300" src="//jsfiddle.net/jscodedev/h83n5eLx/9/embedded/result,html,js,css" 
        allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 

변경한 iframe 코드를 적용하면 위와 같이 나타난다.