CODEPEN 작성 코드를 블로그에 넣기

소스코드 관리를 위해 

CODEPEN을 사용하기로 했습니다.

오픈소스 이지만 

블로그에도 함께 공유하고자 알아보던 중

블로그에도 내가 작성한 CODEPEN 소스를 올릴수 있는 방법이 있어 소개하려 합니다.

우선 회원가입이 되어 있어야 합니다.

회원가입은 기본사항 임으로 바로 패스 들어갑니다.~

1. 회원가입 후 소스코드를 작성할 PEN을 생성해야 합니다.

Create --> Pen 클릭!!!

2. 코드 작성.

Pen을 누르면 아래와 같이 작성할 수 있는 화면을 확인할 수 있습니다.

임의로 저는 작성한 부분이 있습니다. 그걸 샘플로 다음영역에 보여 드리죠~

3. 작성한 코드 저장 후 Embed 하기.

코드를 작성하면 저장을 해야겠죠 

아래와 같이 SAVE 버튼을 클릭해서 저장해 줍니다.

저장 후 아래와 같이 클릭하여 소스코드를 저장 합니다.

4. 복사한 소스코드를 블로그에 넣기 

저는 TISTORY를 이용하여 블로그를 하고 있습니다.

이곳은 글을 작성할때 HTML로 바꿔서 확인할 수 있는데요. 

HTML 체크 후 아까 복사했던 코드를 넣어 줍니다.

보이시나여!!!

아래와 같이 나의 블로그에 CODEPEN 이 들어가 있는 모습~!!! ㅎ

저같이 IT 직종으로 블로그를 운영하시는 분으로써는 참 유익한 정보인것 같습니다.

이상으로 내용 마치며

수정할 내용이나 유익한 정보가 있다면 

아래 덧글 부탁드립니다. :)