[웹 에디터] 코드 미리보기, 코드삽입 사이트 codepen

codepen : Front-end designer playground

작성한 HTML, CSS, JavaScript에 코드의 결과를 알려주는 웹사이트이다. 또한 작업한 것을 자신의 블로그나 개인홈페이지에 삽입 할 수 있다.

1. http://codepen.io/ 여기 회원가입해야한다.

2. Create 버튼을 클릭한다.

3. 소스를 적고 Save버튼을 클릭한다.

4. 저장 후 우측하단에 Embed버튼을 클릭하면 Embed This Pen 팝업이 뜨고 맨 아래 코드를 복사한다.

5. 자신이 쓰는 글을 HTML형식으로 바꾼 후 Copy & Paste하면 끝!

See the Pen KbevWj by Beomju Kim (@kbjbest) on CodePen.