CodePen - 코드펜을 웹에서 삽입할 수 있게 하기 / Embed

 

---

코드펜 에디터 다른 곳에서 보여주기

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 코드펜에서 작성한 코드를 에디터 창 그대로 웹으로 공유하는 방법을 알아보려고 합니다. 코드펜은 누구나 함께 소스를 오픈하고 개발하면서 서로의 작품을 공유하는 공간입니다. 가끔 좋은 펜(Pen)이 있다면 이를 웹페이지에 삽입할 수 있습니다. 

 

● 2. 방법은 우선 Pen에 접속해서 embed를 클릭합니다. 해당 기능은 다른 웹페이지에 소스를 심을 수 있게 만들어 줍니다.

 

● 3. 그럼 이렇게 Embed 모드가 활성화됩니다. 여기에 있는 옵션을 사용하여 퍼갈 수 있게 됩니다.

 

● 4. iframe 이랑 HTML 모드가 존재합니다. 이는 방식의 차이입니다. 

 

 

● 5. 소스를 확인해보면 HTML 모드는 P태그로 페이지에서 작동되도록 되어 있고, iframe 모드는 코드펜의 페이지를 노출하는 방식으로 되어 있습니다. 

 

● 6. 옵션은 밝은 라이트 테마와 어두운 다크 테마로 나뉘어 있습니다. 밝은 테마를 사용하면 

 

● 7. 좀 더 밝은 에디터의 모양으로 공유가 가능합니다. 

 

● 8. Use click-to-load를 체크하면 실행창에 모습이 바로 노출되지 않습니다. 

 

● 9. 이렇게 Run Pen 모드로 바뀌어 클릭 시에 실행 화면이 나타나도록 변경됩니다.

 

 

---

마무리

---

 

좋은 소스를 공유해보세요