웹과 도구/블로그 운영 칠판

sublime text, prism, jsfiddle 이 3가지 tool을 이용하다.

Excel 밟아 2014. 9. 21. 16:56


Html과 css 관련 포스팅을 가끔 올립니다.

글을 작성하면서

'코딩'과 '결과'를 어떻게 하면 

편리하고 이쁘게 포스팅에 넣을 수 있을까 고민을 했습니다.



마땅한 툴을 찾아 헤맨 시간이 적지 않았습니다.


1. 코딩

(1) 'Sublime text'를 이용하여 코딩하고

    이것을 'prism'을 이용하여 블로그에 게시


(2) 사용법

- '서브라임 텍스트' 여기 클릭

- '프리즘' 여기 클릭


2. 결과

(1) jsfiddle을 이용하여 블로그에 게시


(2) jsfiddle 사용법

 jsfiddle.ne에 접속(회원가입/로그인 않고도 사용가능)


 html 입력칸에 코딩 한다. <html>...</html>,<head>....</head> 등은 쓸 필요가 없고, <body>...</body>태그 사이에 오는 요소만 입력한다.


▶ run을 클릭하여 result를 확인하고, save를 클릭하여 저장 한다.


 share를 클릭하고 embed on your page에 있는 코딩을 복사한다.

※ share를 클릭하고 (embed options)을 클릭하면 튜토리올을 볼 수 있다.


 티스토리 글쓰기에서 html로 전환하여 위 코딩을 붙여 넣는다.

※ 예를 들어 html과 result만 원한다면

*원래 코드 (javascript, html, css, result 순으로 나옴)

<iframe width="100%" height="300" src="http://jsfiddle.net/n7sta64t/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

*수정한 코드 (html, result 순으로 나옴)

<iframe width="100%" height="300" src="http://jsfiddle.net/n7sta64t/embedded/html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

원래 코드에 html,result를 삽입하여 티스토리 글쓰기에서 html로 전환하여 이 코드를 붙여 넣기 한다. 아래 그림처럼 글에 넣어진 것을 확인할 수 있다.(아래 그림의 html과 result를 클릭해보세요!)