[HTML] 블로그에 코드 및 결과 공유하기 / 코드펜 사용 방법 (CodePen)

웹 개발, 특히 HTML, CSS, JavaScript 관련 코드를 결과물과 같이 공유하고 싶을 때 코드펜을 사용합니다.

많은 블로그에서 사용하고 있는 기능이지만 처음 접하는 경우 헷갈릴 수 있으니 간단한 사용 방법과 티스토리 블로그에 코드를 공유하는 방법을 알려 드리겠습니다.

 

코드펜(CodePen) 사용 방법

 

1. 코드펜 사이트 접속

https://codepen.io/

CodePen

 

2. 회원 가입

 - 굳이 PRO 버전을 사용하지 않아도 됩니다.

코드펜 공식 사이트

 

과거에는 트위터, 페이스북 계정으로도 로그인 연동이 가능했지만 최근에는 구글, 깃허브 계정으로만 로그인 연동이 가능합니다.

코드펜 로그인

 

처음 로그인하면 튜토리얼이 진행되는데 블로그에서 한번쯤 구경해 봤다면 사용 방법이 어렵지 않습니다.

코드펜 튜토리얼

 

3. HTML 코드 작성 (왼쪽)

HTML 코드 작성

 

4. CSS 코드 작성 (중간)

CSS 코드 작성

 

5. JS (JavaScript) 코드 작성 (오른쪽)

JS 코드 작성

 

코드펜(CodePen) 에서 작성한 코드 티스토리 블로그에 공유하기

 

1. 코드 작성 후 우측 상단 SAVE 눌러서 저장

코드 작성 후 저장하기

 

2. 우측 하단 Embed 클릭

Embed 클릭 (임베디드)

 

3. 옵션 지정 후 HTML 코드 복사

 

선택할 수 있는 옵션

• Default Tabs - 공유된 화면에서 기본으로 보여질 탭(Tabs)을 선택하기, 결과를 바로 보여주기
• Theme - 밝은 버전, 다크 버전 선택 가능
• Use Click-to-Load - 클릭해야 결과창 보여지도록 실행 (블로그 게시물 로딩 속도 향상)
• Make Code Editable - 블로그 글을 보는 사람이 직접 코드를 수정할 수 있도록 에디터 접근 권한 부여

코드펜으로 작성한 코드 공유

 

4. 티스토리 글쓰기 - HTML 작성 모드로 변경 후 코드 붙여 넣기

 

코드펜(CodePen) 코드 공유 결과

 

See the Pen 이건 첫번째 레슨 by 이진하 (@nflthxvp-the-sans) on CodePen.