벨로그에 CodePen 삽입하기

지난 글을 쓸때 jsFiddle을 본문에 삽입했었는데, 미리보기 페이지에서는 제대로 작동했지만 실제 보여지는 부분에서는 내용이 보이지 않았다.
링크나 삽입 방법이 잘못되었을지도 모른다고 생각해서 여러번 시도해봤지만 잘 되지 않았다. 그래서 찾아본 결과, 아무래도 jsFiddle은 벨로그에 삽입할 수 있는 기능이 아직 지원되지 않는것 같다. 그래도 다행히 CodePen은 개체 삽입 기능이 지원된다고 해서 금방 수정할 수 있었다😙

1. CodePen 회원가입

트위터, 깃허브, 페이스북, 이메일 중 편한것으로 가입하면 된다.
이메일로 가입하려고 했는데 이미 깃허브 계정으로 쓰고있더라...🤦‍♀️

2. 코드 작성 및 저장

3. 소스코드 복사

우측 하단의 Embed 버튼을 누르고

Iframe 탭을 눌러 코드를 복사한다. 다른 외부 서비스는 공유전용 소스코드를 복사하면 되지만 Codepen의 경우에는 iframe 형태의 소스 코드를 복사해야한다.

4. 게시글에 코드 붙여넣기

마지막으로 원하는 위치에 복사한 코드를 붙여넣으면 끝!




CodePen 외에도 삽입할 수 있는 외부 서비스는 다음과 같다.

• Youtube
• Twitter
• CodeSandbox
  
  

내용참고 : 벨로그 공식 블로그