블로그를 만들면서 자세한 설명 글을 위해 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 모드로 변경 후 원하는 위치에 복사한 코드를 붙여놓는다.
'Dev' 카테고리의 다른 글
비동기통신, 동기통신 (0) | 2024.08.27 |
---|---|
payload 란 (0) | 2024.08.26 |
react-icons 사용법 (0) | 2024.08.23 |
.env로 개발/배포 환경 설정 (0) | 2024.08.23 |
meta 태그 (0) | 2024.08.23 |