티스토리에서 코드펜 사용하는법

1. https://codepen.io/

CodePen

에 들어가서 로그인을 한다.

 

2. new Pen 을 눌러서 작업을 시작한다.

 

3. 사용할 HTML 코드와 CSS 코드를 각 창에 넣으면서 결과를 바로 확인한다.

 

4. 저장한 후에, 오른쪽 하단 밑에 있는 Embeded 를 클릭한다.

 

5. 우측 하단에 HTML(recommended) 가 클릭되어있는것을 확인하고 그 코드를 복사해온다.

 

6. 티스토리 글 작성모드중에 HTML 모드를 설정해서 원하는 위치에 복사한 코드를 붙혀넣는다.

 

7. 다시 기본모드로 바꾸고 저장하면 코드펜에서 보였던 작업화면이 그대로 들어온다.

See the Pen abJyaEa by lsj5634 (@zinisang) on CodePen.

 

끝!

 

 

 

 

 

Light Theme

 

Dark Theme