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

들어가며

자바스크립트 딥다이브 스터디와 관련한 글을 정리해서 올리고 있다.
이때 코드 블록으로 된 내용을 많이 올리고 있는데, 단순하게 올리는 것보단 코드펜을 활용해서 적용하면 더 좋을 것 같다는 생각이 들었다.

이번에는 티스토리 에서 코드펜 을 사용하는 방법을 올려보려고 한다.

선행조건

티스토리에 코드펜 을 사용하려면 우선 코드펜 계정이 있어야한다.

코드펜 링크
위의 링크에 접속하여 회원가입하면 된다. 방법은 어렵지 않으므로 따로 작성하진 않겠다.

코드펜 내용

null

위의 그림과 같은 코드펜 내용을 사용하고자 한다.

1.embed 버튼을 클릭한다.

2.HTML (Recommended) 탭의 Copy Code 를 클릭한다.
코드를 복사하면 embed 코드가 복사된다.

3.티스토리 에서 기본 모드 를 HTML 로 변경한다.

null

4.복사한 코드를 붙여넣는다.

---

적용 결과

See the Pen Untitled by space.developher (@DeokHaengCho) on CodePen.