[CodePen] HTML, CSS, JS 코드를 블로그에 이쁘게 올리기 CodePen 사용법

개발 관련 글들을 볼 때

이런 식으로 자바스크립트를 이쁘게 올려져 있는걸 종종 확인할 수 있다.

요거를 어떻게 하는지 간략히 알아보자.

 

CodePen: Online Code Editor and Front End Web Developer Community

CodePen

요기 들어간다.

Sign Up을 해주고 로그인을 한다.

그리고 왼쪽 네비게이션의 Pen을 누른다.

여기서 원하는 코드를 작성한다.

Save를 누른다.

우측 아래 Embed를 클릭.

테마를 고르고 Copy Code를 누른다.

그리고 티스토리같은 경우는 HTML작성으로 해서 작성하면

See the Pen Untitled by 문창주 (@nfooousu-the-bold) on CodePen.

요래됐슴당~ 

아무래도 이거는 html, css, js 세 개의 코드를 보여줄 때 유용할 것 같다.