velog에 코드펜(codepen) 넣기

벨로그를 작성하면서 실행 화면을 보여주고 싶을 때가 많았는데 알고 보니 벨로그에 코드펜을 넣을 수 있다?!

두둥탁! 바로 알아보죠! 🛵

1. 코드펜(codepen) 로그인 하기

codepen.io 에 들어가서 회원가입 또는 로그인을 해주세요!

2. 코드 작성 후 Save, Embed하기

좌측에 Pen을 클릭해 코드를 작성합니다.
codepen을 보면 진짜 멋진 작품이 많아서 매번 신기..😶

코드를 작성 후 우측 상단에 Save버튼을 눌러 저장하고
우측 하단에 Embed 버튼을 눌러줍니다.

3. Iframe 코드 복사하기

저희가 필요한건 Iframe!
클릭 후 나오는 코드를 복사해서 벨로그에 붙여넣으면..!

짜잔~🎉
벨로그에 코드펜 넣기 성공!