codepen 삽입

블로그를 만들면서 자세한 설명 글을 위해 codepen을 삽입을 해보았다.

일반 삽입 방법

• 오른쪽 하단의 Embed를 클릭한다.
• 클릭하면 아래와 같은 모달창이 뜨는데 원하는 방식으로 코드를 복사해 와 적용하면 된다.

 

 

블로그에 적용 중인 코드

iframe의 소스코드를 가져와 주소를 동적으로 받아오고 있다.

<iframe
   height="350"
   className="w-full"
   title="videoTag"
   src={`${codepenUrl}/${codepenMyId}/embed/${codepenId}?default-tab=html%2Cresult`}
   loading="lazy"
>
   <span>See the Pen</span>
   <Link href={`${codepenUrl}/${codepenMyId}/pen/${codepenId}`}>
       videoTag
   </Link>
   <span>by pminsun</span> (<Link href={`${codepenUrl}/${codepenMyId}`}>@pminsun</Link>)
   <span>on</span>
   <Link href={codepenUrl}>CodePen</Link>.
</iframe>

 

 

티스토리 삽입 방법

• 오른쪽 하단의 Embed를 클릭한다.
• HTML(Recommended) 복사한다.
• 글쓰기 공간에서 기본모드에서 HTML 모드로 변경 후 원하는 위치에 복사한 코드를 붙여놓는다.