[꿀팁] - 코드펜 사용법 및 티스토리 적용방법

안녕하세요, 오늘은 자신의 티스토리에서 소스의 실행결과를 미리 볼 수 있는 코드펜을 사용하는 방법과 티스토리에 적용하는 방법에 대해서 알아보도록 하겠습니다. 기존에는 티스토리의 코드 블록을 이용하여 자신이 구현한 소스를 공유하였다면, 코드펜이라는 사이트를 통해 코드와 실행결과를 티스토리에 적용하여 공유할 수 방법에 대해서 알아보겠습니다.

 

1. 코드펜 회원가입

아래의 사이트로 이동하여 회원가입을 진행한다.

https://codepen.io/

 

CodePen

 

---

위 링크로 접속하여 [ Sign Up for Free ] 버튼을 클릭한다.

 

Twitter, GitHub, Facebook 아이디가 없을 경우 [ Sign Up with Email ] 버튼을 통해 코드펜에 직접 가입한다.

가입을 완료하면 회원가입 시 입력한 이메일로 인증메일이 옵니다.

 

[ Click to Verify Email ] 버튼을 클릭하여 인증을 완료합니다.

 

 

2. 코드펜 사용방법

로그인을 완료한 후 왼쪽 상단에 [ Pen ] 을 클릭합니다.

---

코드를 작성한 후 [ Save ] 버튼을 클릭합니다.

---

오른쪽 하단에 [ Embed ] 버튼을 클릭합니다.

 

---

[ Copy Code ] 버튼을 클릭하여 클립보드에 복사합니다.

 

3. 티스토리에 적용

코드펜에서 복사한 스크립트를 티스토리에 적용합니다.

 

 

 

4. 티스토리에 적용한 코드펜 소스