벨로그에 코드펜(codepen) 삽입하기
🖍 velog에 코드펜(codepen) 삽입하기
강의중에 호준 강사님께서 블로그에 코드펜을 사용할 수 있다고 언급해주셨는데 "오 좋다!" 하고 냅다 화면 캡쳐해서 블로깅했던 내가 부끄러워 올리는 글....... 혹시 저 같은 코린이분들을 위해 도움이 되었으면 좋겠습니다 :) ...
1. 코드펜 회원가입하기
트위터, 깃헙, 페이스북, 이메일로 손쉽게 회원가입 가능하다.
무료 기능만 써도 충분한 것 같아 따로 유료 구매는 하지 않았다.
2. 좌측 상단의 pen에서 코드 작성 후 저장하기
다음과 같이 화면에서 구현 화면을 바로 확인할 수 있다.
작업이 끝나면 우측 상단의 save 버튼을 눌러준다.
3. 우측 하단에 embed 클릭 및 irframe 소스코드 복사
저장을 하면 우측 하단에 다음과 같은 버튼들이 보인다. embed 클릭!
여러가지 항목 중 코드펜은 iframe의 소스코드가 필요하다. Iframe 클릭!
밑의 코드는 밑에서 나올 id 항목에 넣어주면 된다.(id명~result)
4. 벨로그 작성시 해당 소스코드 붙여넣기
개체 삽입 신택스는 다음과 같다.
![service_name](id)
여기서 service_name은 codepen이며 코드 작성 예시는 다음과 같다.
!codepen[nayoung-gu/embed/NWqyego?height=265&theme-id=light,result]
❗ 주의할 점
코드펜에서 각기 다른 코드를 작성하고 벨로그에 첨부할 땐 코드펜에서 매번 새로 만들어 작업해야 합니다. 같은 페이지에서 작업하고 저장하고 복붙하면 포스팅 했을 때 같은 코드가 나오......(눈물 좌르르) 그렇습니다 💦
혹시 잘못된 정보가 있으면 피드백 주세요!! 항상 환영입니다〰
참고 : 벨로그 문서
Author And Source
이 문제에 관하여(벨로그에 코드펜(codepen) 삽입하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mooongs/벨로그에-코드펜codepen-삽입하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)