[Codepen] 코드펜으로 티스토리에 소스 올리는 방법

초기에 내가 실무에서 많이 쓰고 유용했던 코드들을 복사해서 가져다 쓰기위해 

티스토리 글쓰기 기능에 있는 코드 블럭을 많이 사용했다.

지금도 나름 익숙해져서 많이 쓰지만 이제는 코드펜을 알게 돼서 이걸 자주 이용하고 있다

 

https://codepen.io/

CodePen

 

코드펜을 사용하려면 회원가입을 먼저 해줘야하는데 SNS로도 회원가입 할 수 있으니 편리하다

(사이트 들어가서 Sign Up 버튼 눌러주면 회원가입 페이지가 나온다)

 

회원가입이 완료됐으면 로그인하고 왼쪽 메뉴에 Pen을 눌러준다

 

 

그러면 다음과 같은 화면이 뜨는데 여기다 코드를 적으면 아래 결과에 자동 반영된다

 

 

그리고 Alt + S 를 눌러주면 저장이 되면서 빨간색으로 표시한 최하단 우측에 버튼이 생성된다

 

 

 여기서 Embed 버튼을 눌러주면 우측 하단에 HTML 소스가 있다 이거 모두 복사해준다

 

 

그리고 본인 티스토리 글쓰기 페이지 열어서 기본모드 클릭해서 HTML로 바꿔준다

 

 

그러면 내가 쓴 글들이 HTML로 표시되는데 아까 복사했던 텍스트를 적절한 위치에 붙여넣기 해준다

(본인은 최하단에 했다)

 

 

그러면 아래 스샷처럼 코드펜 Embed가 생성되는데 글 다썼으면 완료 누르고 확인해보면 내가 아까 적었던

코드랑 결과 화면이 그대로 출력된다

 

See the Pen Untitled by bbongsu (@bbongsu) on CodePen.