Embedded Pens Doc (코드팬 블로그에 붙이기!)

프론트에 대한 코딩예제를 찾다보면 Code Pen에 잘 되어있는 코드들이 많다.

 

이러한 코드들을 블로그에서 코드뿐만 아니라 코딩결과도 바로 볼 수 있도록 내장하는 방법에 대한 문서가 Code Pen 사이트에 있다.

 

하지만 영어로 되어있기 때문에 해석을 하고, 앞으로 나도 써먹을까 한다! 

 

많은 분들에게 유용하게 쓰이길!

 

본문 : https://blog.codepen.io/documentation/features/embedded-pens/

 

 

Embedded Pens

Bring Your creations on CodePen to documentation, blog posts, or any other site!

CodePen의 창작물을 문서, 블로그 게시물, 다른 어떤 사이트로 가져가세요 !

 

내장된 코드를 복사-붙여넣기로 다른 웹사이트에 Pens를 넣을 수 있습니다. 

코드를 가져오기 위해서 Pen의 Editor(편집기) 오른쪽 아래쪽에 있는 "Embed"버튼을 클릭합니다.

또는 Export 메뉴에서 "Embed Pen" 을 선택합니다.

 

Export 버튼을 눌렀을 때, 두가지 메뉴가 나오고

 

 

 

Embed 버튼을 눌렀을 때, Embed Builder 창이 나온다.

 

 

Embed Builder는 코드를 내장할 때, 당신이 원하는데로 넣을 수 있도록 도와줍니다.

 

embed theme 선택 : Light(밝은) 과 Dark(어두운) 테마 두가지가 있습니다. 모든 CodePen 또한 사용자 정의 가능한 개인 기본 테마도 제공. 

PRO 회원은 (유료사용자) 무한한 내장테마를 사용할수 있다.

 

탭 화면 선택 : embed builder는 결과 탭과 코드 탭 중 하나가 선택되어 시작된다. 

다른 코드탭을 선택하거나, 결과를 최대화하기 위해 코드 탭을 완전히 끄거나, 결과를 숨기고 코드 탭을 최대화 할 수 있다.

 

"Click-to-Load" 로 미리보기 만들기 : "use click-to-load" 선택박스를 선택하면 미리보기를 사용할 수 있다. 미리보기는  "RUN PEN" 버튼으로 (정적 이미지) 미리보기가 표시된다.  방문자가 버튼을 클릭하면, Pen은 실행될것이다.

 

 

 

a Pen in Click-to-Play Preview Mode

내장 편집기능 만들기 : PRO 회원은 CodePen 편집기처럼 내장 편집기능을 사용할 수 있다.

내장 높이 설정 : 하단의 bar를 드래그하여 높이를 변경할수 있다. 복사&붙여넣기 코드는 코드 길이만큼 높이가 자동으로 설정된다.

 

내장 코드에 대한 사용자 정의가 끝난 다음에, 
미리보기 아래에 있는 "Copy&Paste Code" 박스에서 코드를 복사한다.

그리고 웹사이트나 코드를 나타내고 싶은 곳에 코드를 붙여넣는다.

 

# The Embed Code

 

붙여넣을 코드를 보여주는 예제가 있다. 이코드는 HTML 이다.

<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>@afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p>

Th