CodePen 작성 코드를 블로그에 넣는 방법(실시간 에디터, 블로그에 코드 삽입)

제가 블로그 포스팅을 시작하면서 여러 블로그를 돌아다니다 보니

 

 

 

이런 형태의 코드 에디터가 보이더라고요! 그래서 어떻게 하는 거지 찾아보다가 실시간 에디터 CodePen을 알게 되었습니다. 처음 본 경험해본 codepen의 느낌은 가히 신세계.....! 아니 코드를 올릴 때도 가독성도 좋고 자리 차지도 많이 하지 않아서 너무 좋더라고요 ㅠㅠ

 

아무튼 ^^;;; 이번에 실시간 코드 에디터인 codepen을 소개하고 html, css, js를 효율적으로 보여주는 방법을 소개해보려 합니다!!

 

---

CodePen 사용법

https://codepen.io/

CodePen

 

1. 여기 사이트로 들어가서 회원가입을 해주시면 됩니다!

 

 

 

2. Pen 버튼을 클릭하여 작성화면을 띄웁니다.

 

 

 

3. 코드를 작성해줍니다. (코드는 처음 튜토리얼로 주어지는 코드를 사용하였습니다)

 

 

 

4. 작성 후 저장을 하고 왼쪽 아래 Embed 버튼을 누릅니다.

 

 

5. 원하는 테마와 설정을 한 후 코드를 복사합니다.

 

 

 

6. 글쓰기에서 HTML 모드를 선택 후 코드 아래에 붙여넣기를 합니다.

 

 

7. 그러면 아래와 같은 코드블럭이 완성이 됩니다!

 

 

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

 

 

---

이상 블로그에 codepen을 이용한 코드 올리는 방법이였습니다~