웹페이지에 CODEPEN 소스 붙여넣기

인터넷 혹은 코딩관련 커뮤니티 사이트에서 웹문서(HTML, CSS, Javascript)의 소스에 대한 답변으로 codepen을 웹페이지에 붙여넣는 경우가 있는데, 이 번 포스팅에서는 이 방법에 대해서 알아보겠습니다.

 

 

CODEPEN 홈페이지인 아래의 사이트에 접속합니다.

CodePen

※ 공개할 소스를 제공하기 위해서는 가입이 필요합니다. 구글 계정으로 쉽게 가입이 가능하니, 여기서는 가입절차는 생략하고 진행하겠습니다.

 

1. 공개할 Pen 프로젝트 만들기

접속 첫 화면에 가면, 왼쪽 상단에 "CREATE"아래에 "Pen"아래 "Pen"을 클릭해서 Pen을 하나 생성합니다.

 

2. Pen 프로젝트 이름 변경

소스 수정에 앞서서 상단 위쪽의 제목을 적당한 이름으로 변경합니다.

 

3. 소스 변경

적당하게 소스를 변경합니다.

 

4. 웹페이지에 붙여넣기할 태그 복사하기

화면 오른쪽 하단에 있는 "Embed" 버튼을 클릭합니다.

 

"Copy Code" 버튼을 클릭해서 태그를 복사합니다.

사용자가 수정 가능하게 제공을 하시려면, "Make Code Editable"항목을 "On" 시켜주세요. (단순히 사용자에게 제공된 화면에서면 변경이 되는 것입니다. 실 소스는 그대로 유지됩니다.)

 

5. 웹페이지에 반영하기

5.1 웹페이지의 적당한 위치에 붙여넣기를 합니다.

 

5.2 티스토리에서는 붙여넣는 방법이 두 가지가 있습니다.

방법1: HTML 블럭 이용하기

"HTML 블럭"을 클릭하고, 복사한 태그를 붙여넣기 합니다.

 

방법2: HTML 모드 이용하기

"기본모드"를 "HTML"모드로 변경 후 적당한 위치에 태그를 붙여넣기 합니다.

 

6. 결과 화면

See the Pen hello world by ccusean (@ccusean) on CodePen.

 

이상으로 CODEPEN을 웹 페이지 혹은 티스트로 블로그에 적용하는 방법에 대해서 알아 보았습니다.

행복하세요.