Codepen use for my Tistory blog

티스토리에서 code 직접 작성하는것 보다 codepen 같을걸로 확인하면 좋을것 같아 써보게 되었슴다.

 

 

1. 글 작성하기전 CODEPEN 계정부터 만들어주세요.

2. 로그인후 codepen 메인 화면 좌측상단에 Pen을 클릭

 

 

3. 작성하실 코드 html, css, js 작성하시고 상단 우측에 Save 버튼 클릭 하여 코드 저장

4. 우측 하단에 Embed 클릭

 

 

5. Embed 누르면 해당 Pen에 대한 내용이 HTML(recommended) 탭쪽 부분에 작성 되있는

code들을 Ctrl + c 하시거나 Copy Code 버튼을 눌러 복사 해줍니다.

 

 

6. Tistory로 넘어와서 글작성 화면으로 가셔서 글작성 상단 화면에 기본모드를 클릭하여 HTML글 작성으로 변경합니다

 

7. 작성하실 코드 html, css, js 작성하시고 상단 우측에 Save 버튼 클릭

8. 작성모드 변경된다는데 그냥 눌러줍시다. 가져온 code 갖다 붙여야 돼잖아요.

 

 

See the Pen Untitled by Hs (@tkrm100) on CodePen.

 

9. 복사한거 위 이미지처럼 갖다 붙여 놓고 완료 버튼 눌러서 게시글 등록 해주면 이 게시글 같이 나옵니다.