반응형
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코드 붙여넣은 후 기본모드 돌아왔을 때,
아래 화면과 같이 보이는 것은 정상적인 현상입니다.
반응형
'정보공유' 카테고리의 다른 글
| [이미지] 업로드 없이 원하는 사이즈 이미지 URL얻기 (더미이미지 무료얻기) (0) | 2020.11.26 |
|---|---|
| [Windows] 윈도우10 화면 녹화 기능 (프로그램 설치X) (0) | 2020.11.18 |
| [새로고침] IE 크롬 새로고침/강력 새로고침 (0) | 2020.10.30 |
| [EditPlus] 에디트 플러스 젠코딩(Zen Coding) 사용하기 (1) | 2020.10.30 |
| [앱디자인] 해상도 계산 px -> dpi (0) | 2020.03.24 |
댓글