[codepen] 코드펜을 티스토리에 불러와보자

---

 

안녕하세요. 플입니다.

오늘은 코드펜을 이용해 코드를 불러와볼 거예요.

 

---

 1.  코드펜

https://codepen.io/

CodePen

우선 코드펜 사이트에 접속해줍니다. 그리고 로그인을 해주세요.

 

 

---

 2.  코드 작성

codepen 오른쪽 메뉴

오른쪽 메뉴 맨 위를 보시면 Pen이라는 메뉴가 있는데요. 이 메뉴를 클릭해주세요.

 

codepen 에디터화면

그러면 이렇게 간단하게 코드를 짤 수 있는 공간이 나와요.

아무거나 짜 볼게요.

 

codepen 저장하기

코드는 제가 아무거나 짜 본 거니까 신경 쓰지 말아 주세요.

일단 코드를 다 쓰셨다면 저장(Save) 버튼을 눌러서 저장해줍니다.

 

codepen embed

이제 오른쪽 아래에 보시면 임배드(embed) 버튼이 보이실 거예요. 클릭해주세요.

 

---

 3.  불러올 코드펜을 꾸며보자

embed창 테마 설정

그러면 이런 창이 뜨는데요. 저 왼쪽 위에서 테마를 고를 수 있어요. 저는 다크 모드를 선택했습니다.

 

embed창 drag to resize버튼을 드래그해서 높이 조절

drag to resize 버튼을 위아래로 드래그해서 사이즈를 조절해줄 수도 있어요.

 

embed창 iframe

이렇게 불러올 코드펜의 디자인을 모두 고르셨다면 iframe버튼을 눌러주세요.

 

embed창 iframe 복사하기

이렇게 아이프레임용으로 코드가 나올 거예요. 얘를 복사해주시면 됩니다.

 

---

 4.  티스토리에 불러와보자

티스토리 글쓰기모드 맨 왼쪽 기본모드에서 HTML로 변경하기

자, 티스토리 글쓰기 모드로 와보시면 맨 끝에 기본 모드가 있을 거예요.

여기서 가장 아래 HTML 버튼을 눌러주세요.

 

티스토리 HTML 모드

그러면 이런 에디터 화면이 나옵니다. 멋있죠?

제가 쓴 글이 보이네요. 자신이 원하는 위치에다 아까 복사한 코드를 넣어주시면 됩니다.

 

HTML 모드에 iframe 붙여넣기

이렇게 넣어주시면 됩니다.

 

티스토리 글쓰기 기본모드로 변경

그리고 맨 끝 HTML 버튼을 눌러 다시 기본 모드로 돌아와 주세요.

 

 

 

짠! 이 위에 코드펜이 있죠?

이렇게 불러오면 된답니다. 이게 있으면 블로그에서도 작업 화면을 미리 볼 수 있어서 좋더라구요.

 

---

그럼 이만.

총총.