본문 바로가기

SNS와 블로그

티스토리에 코드펜 코드 넣는 방법(Codepen.io)

반응형

티스토리에 코드펜 코드 넣는 방법을 알아보겠습니다. 웹페이지를 만들 때 사용하는 HTML, CSS, Javascript 코드를 티스토리 포스팅에 넣어보겠습니다. 웹페이지와 관련된 코드를 넣을 때는 codepen.io를 사용하면 편리합니다. 그러면 자세한 방법을 아래에서 알아보겠습니다.

 

티스토리에 코드 넣기

1. Codepen.io 사이트 들어가기

codepen.io 사이트에 들어갑니다. 오른쪽 위에 있는 가입버튼(Sign Up)을 클릭해서 가입합니다.

codepen-가입하기

 

가입할 때는 트위터, 깃허브, 페이스북 계정이나 다른 이메일 주소를 사용하면 됩니다. 이 포스팅에서는 구글 이메일 주소로 가입하겠습니다.

codepen-가입가능계정

 

2. Pen 메뉴 선택하기

가입한 계정으로 로그인합니다. 왼쪽 위에 있는 메뉴에서 Pen을 선택합니다.

pen메뉴

 

그러면 HTML, CSS, Javascript를 넣을 수 있는 화면이 나옵니다. 여기에 코드를 작성한 뒤에 티스토리 블로그에 넣으면 됩니다.

codepen-화면

 

3. 코딩하기

HTML, CSS, Javascript 메뉴를 선택해서 코딩을 합니다. border-radius를 사용해서 원을 만들어 보겠습니다. HTML에서는 div 태그를 만들고 id를 circle로 정했습니다. CSS에서는 border-radius:50%로 원을 만들었습니다. 배경색은 blue로 정했습니다.

코딩하기

 

그러면 결과창에 아래와 같은 파란색 원이 그려집니다.

파란색원

 

4. Save 하기

코드를 티스토리와 같은 다른 사이트에서 사용하기 위해서는 먼저 저장을 합니다. 오른쪽 위에 있는 메뉴에서 Save를 선택합니다. 그러면 codepen.io 서버에 저장이 됩니다.

save

 

5. Embed 선택하기

아래 보면 Embed 버튼이 있습니다. 이 버튼을 클릭합니다. 그러면 결과창과 티스토리에 넣을 코드를 확인할 수 있습니다.

embed

 

테마와 옵션을 선택할 수 있습니다. Use Click-to-Load를 선택하면 화면에서 Run Pen을 선택해야 결과가 보입니다. 티스토리 성능을 위해서 사용하는 것이 좋습니다. Make Code Editable를 선택하면 티스토리에 들어온 사람이 코드를 바꾸고 그 결과를 확인할 수 있습니다.

티스토리-codepen-옵션

 

티스토리 포스팅에 넣을 HTML 코드가 있습니다. 이 코드를 복사해서 사용하면 됩니다. Copy Code를 선택해서 복사합니다.

코드복사하기

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoEbzMx" data-preview="true" data-editable="true" data-user="itple" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/itple/pen/PoEbzMx">
  Untitled</a> by itple (<a href="https://codepen.io/itple">@itple</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

 

6. 복사한 코드 붙여넣기

티스토리 에디터에서 HTML 모드로 바꿉니다. 코드를 넣고 싶은 곳에 붙여넣고 발행하면 됩니다.

html모드

 

그러면 아래와 같이 HTML, CSS 코드가 티스토리에서 보이게 됩니다. 코딩한 결과를 Result 메뉴에서 확인할 수 있어서 편리합니다.

티스토리-코드복사-결과

 

See the Pen Untitled by itple (@itple) on CodePen.

 

이번 포스팅에서는 티스토리에 코드 넣는 방법을 알아봤습니다. 파이썬나 C와 같은 언어를 티스토리에 넣기 위해서는 티스토리의 코드 문법 강조 플러그인을 사용하면 됩니다.

코드문법강조

 

자세한 내용은 아래 포스팅을 참고하기 바랍니다. 감사합니다.

추천 포스팅

반응형