✏️코드펜(CodePen) 사용법

🔍코드펜 사용법과 티스토리 게시글에 붙여넣는 법까지 간단하게 정리해보았다.

 

코드펜(CodePen)이란?

코드펜(CodePen)은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티이다.

출처 - 위키백과

CodePen

코드펜에서 자신이 만든 HTML, CSS, JS 코드를 테스트할 수 있고, 티스토리 같은 블로그에 공유할 수도 있다.

티스토리를 작성하면서 꽤 유용하게 사용하고 있기 때문에 그 방법을 간단하게 정리해보았다.

 

 

 

1. 회원가입 및 로그인

CodePen 홈페이지에서 회원가입 및 로그인

 

 

나는 Sign Up with Github로 로그인을 진행했다.

 

 

2. 코드 작성

 

로그인 후 왼쪽 메뉴의 Pen으로 들어간다.

 

 

여기서 HTML, CSS, JS 코드를 작성하면 아래 흰 바탕에 바로 결과를 출력해준다.

 

 

 

3. 티스토리에 포스팅하기

 

코드 작성과 테스트가 완료되면 Save를 클릭

 

Save가 완료되면 페이지 우측 하단에 Embed 버튼을 클릭

 

 

우측 하단에 HTML 탭을 클릭 후 코드를 복사

 

 

티스토리 글쓰기 모드를 HTML로 변경

 

코드 붙여넣기

 

4. 포스팅 후 잘 작동하는지 확인