코드펜 사용법 : 코드펜을 티스토리에 적용하는 방법

써보고 싶었지만 아직까지 써보지 않다가 이번에 알게 되어서 쓰게 된 코드펜

다른 사람도 이 편한 기능을 썼으면 해서 오늘은 코드 펜에 대한 이야기를 쓰게 되었다.

 

 

 

1. 코드펜이 무엇인가?

코드펜(CodePen)은 사용자가 HTML, CSS, Javascript를 작성하면 실시간으로 보여줄 수 있는 온라인 코드 편집기다. 또한 코드 펜은 티스토리나 다른 블로그에도 올릴 수 있도록 코드를 가져올 수 있는 것이 큰 장점이라고 할 수 있다.

 

먼저 궁금하신 분들을 위해서 해당 링크를 남겨둔다.

코드펜 바로가기 클릭하기

CodePen Main Page.jpg

 

 

 

2. 코드 펜을 왜 쓰는가?

그렇다면 개발자들이나 코딩을 하는 사람들은 코드펜을 쓰는 이유가 무엇인가?

 

아래의 장단점을 필자가 느껴본 지극히 개인적 견해임을 참고하길 바랍니다.

 

1) 코드 펜의 장점

- 실시간으로 코드 작성을 확인할 수 있다.

물론 개발자는 따로 html, css, javascript를 따로 만들어 표현을 할 수 있다. 하지만 정말 간단한 거 같은 경우에는 테스트를 위해서 만드는 것은 필자가 생각하기에는 불필요한 작업이지 않을까 싶다. 그럴 때 이 코드 펜을 쓰면 조금 더 유용하고 간단한 코드를 테스트하기에 아주 적격이지 않을까 싶다.

 

- 내가 만든 코드를 저장 및 공유가 가능하다.

코딩의 경우 오픈소스가 워낙 많기 때문에, 스스로 만들어 공유하는 개발자가 많다. 그렇기에 이 코드 펜으로 내가 조금 특별한 코드를 작성하여서 여러 곳에 보여줘 표출을 할 수 있다. 내가 만든 코드를 누군가 유용하게 쓴다면 이것 또한 개발자로서 뿌듯함이지 않을까 싶다.

 

2) 코드 펜의 단점

아직까지는 필자가 느껴보지 못했다.

 

 

 

3. 코드 펜을 어떻게 쓰는가?

이제 코드 펜의 사용법에 대해 알아보려고 한다. 회원가입의 경우 간단하여 생략하였다.

CodePen Login And Main Page.jpg

회원가입이 완료된 후 메인 페이지를 보게 될 경우 다음과 같은 화면이 나오게 된다.

좌측에는 카테고리가 있고, 우측에는 내가 작업한 코드 펜, 혹은 트렌드 등 다양한 코드를 확인할 수 있다.

 

CodePen Meue.jpg

일단 우리는 새로 코드 펜을 만드는 것에 집중하여 위 Pen이라는 메뉴를 클릭한다.

그럼 우측과 같은 화면이 나오는데 구성은 다음과 같다.

1) 제목을 수정할 수 있고, 아래에는 사용자 이름이 표시가 된다.

2) HTML, CSS, JavaScript를 작성할 수 있다.

3) 위에서 작성한 코드가 실시간으로 아래 화면에서 확인할 수 있다.

4) 저장을 통해 1번에 작성한 제목으로 내 Your Work에서 목록을 확인할 수 있다.

 

이렇게 코드를 작성을 한 후 실시간으로 코드를 확인할 수 있어 작업을 진행하면 된다.

 

작성을 완료하였다면, 코드를 복사하는 방법은 다음과 같다.

codePen -> Your Work -> Embed

코드 작성이 완료되어, 블로그에 가져오고 싶을 때 하단에 있는 Embed버튼을 누른다.

 

codePen -> Your Work -> Embed -> HTML -> Copy Code

위와 같은 화면이 나오고 미리 보기 화면으로 한번 체크한 후 HTML로 선택된 상태에서 Copy Code버튼을 눌러주면 복사가 된다.

 

필자는 티스토리 블로그를 사용하기에 티스토리 블로그를 예시로 진행해보려 한다.

tistory -> newpost

티스토리에서는 상단에 기본 모드 -> HTML로 들어가는 곳이 있다. 그 칸을 클릭하게 되면 HTML 코드로 보여주는데 원하는 위치에 해당하는 코드를 넣어주면 된다.

 

See the Pen Moment.js by miok-jung (@miok-jung) on CodePen.

그렇게 코드를 넣어주면 위에처럼 코드가 보이는 현상이 될 것이다. 참고하기 위해 실제로 작성 시 보이는 화면 여러 가지를 캡처해보았다.

codePen used

1) 첫 번째 화면은 코드 펜을 HTML에 넣었을 당시의 화면이다. 여기서 하나 추가적으로 할 것은 반드시 p태그를 하나 추가해줘야 한다. 그렇지 않을 경우 아래 내용을 다시 입력하는데 문제가 발생한다.

가장 쉬운 방법은 코드 펜 복사하기 전 엔터키로 아래와 같은 코드가 있는지 확인한다. 그 사이로 코드 펜을 복사하여도 된다.

<p data-ke-size="size16">&nbsp;</p>

2) 두 번째 화면은 실제 내가 글 작성 시 보이는 화면이다.

 

3) 세 번째 화면은 내 블로그를 들어오는 사용자들이 보일 화면이다. 아까 미리보기에서 보던 것과 같은 화면인 것을 알 수 있다.

 

그 외에 설정하는 것들은 크게 어렵지 않아 생략하려고 한다. 확인해보니까 크게 쓰일일이 없는 것들이라 생략하였다.

 

 

 

이상 오늘은 코드 펜을 사용하는 방법을 보았다.

이미 많은 사람들이 사용하고 있지만, 사용했다는 기록을 위해 남기게 되었다. 앞으로 직접 테스트를 하거나 할 경우에는 이 코드펜을 활용을 많이 하지 않을까 싶다.