정보공유
[코드펜] 티스토리에 코드펜(CodePen)소스 올리기
허그미
2020. 11. 17. 14:15
반응형
1. 코드펜 가입하기
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
2. 가입/로그인 후 코드 작성하기
01 클릭
02 NewPen클릭하여 코드 작성 페이지 이동하기
03 코드 작성 후 Save클릭
04 Embed 클릭
3. 코드 복사하기 (상단 Theme에서 Light/Dark 색상 선택 가능)
HTML탭에 있는 소스 복사
4. 티스토리에 코드 붙어넣기
티스토리에 HTML 또는 마크업 상태로 글작성 해주세요.
[Q] 글작성 중간에 미리보기 했을 때 코드펜 Result 오류나요!
미리보기 화면에서만 "Do not enter,,,,,"나오는 것이며,
글작성 완료 후에는 정상적으로 노출됨을 확인할 수 있습니다.
[Q] 코드펜 코드 붙여넣고 나머지 글 작성은 어떻게 하나요?
필자의 경우
- HTML모드에서 Embed코드 붙여넣고,
- 기본모드로 돌아와서 나머지 글/사진 작성했습니다.
[Q] HTML에서 Embed코드 붙여넣고 기본모드로 돌아오면 코드펜 소스가 이상하게 보여요!
HTML모드에서 Embed코드 붙여넣은 후 기본모드 돌아왔을 때,
아래 화면과 같이 보이는 것은 정상적인 현상입니다.
반응형