velog에서
백틱(｀)
을 통해 코드를 보여줄 수 있다는 것은 첫 게시물에서 정리했습니다.
그러나 블로그를 둘러보다보면
위와 같이 Codepen에서 가져온 코드를 코드 구조와 함께 결과 화면까지 보여주고 있는 게시물들이 있습니다.
오늘은 codepen에서 작성한 코드를 velog에 불러오는 방법에 대해 알아보고자 합니다.
Codepen이란 ?
Codepen은 웹 개발자들이 코드를 작성하고 실험하며 결과를 공유할 수 있는 온라인 플랫폼입니다. 이곳에서는 HTML, CSS, JavaScript를 이용하여 작은 프로젝트부터 복잡한 웹 애플리케이션까지 다양한 웹 기반 코드를 작성하고 시각적으로 확인할 수 있습니다.
Codepen에서 작성한 코드를 Velog에 불러오는 방법
1. Codepen 가입하기
위 사이트에 접속하여 Sign up 버튼 클릭 후 가입을 진행합니다.
가입 후 로그인을 하면 아래와 같은 화면이 나옵니다.
2. 코드 작성
Go make One! 버튼을 눌러 새로운 코드를 작성합니다.
3. Embed 버튼 클릭
코드 작성 후 우측 아래의 Embed 버튼을 클릭하면 아래와 같은 화면이 나옵니다.
4. Iframe 코드 복사
Iframe버튼을 클릭 후 해당 iframe코드를 사용하고자 하는 velog 포스팅에 복사 붙여넣기 합니다.
5. 출력화면 확인
이제 포스팅을 저장하시고 출력된 화면을 확인하시면 됩니다!
.
.
.
.
이미 알고 계신 분도 많겠지만, 이제 막 블로그를 시작하시는 분들을 위해 공유합니다.
그럼
HAPPY CODING!
