코드 미리보기 사이트 codepen 사용법

게시자: 대문 demun 카테고리: 퍼블리셔/도구 2015.11.17 07:00

온라인에서 코드를 작성하고 보여주는 사이트는 몇군데 있습니다. 

이전에도 비슷한 글을 작성한 적이 있지요.

온라인 구문강조 사이트 -> http://demun.tistory.com/2038

이번에는 현재 나와있는 사이트중에서 가장 많은 기능을 제공하고 있는 곳입니다. 바로 codepen 입니다.


1. 회원가입

http://codepen.io/

먼저 회원가입이 안되어 있으시면 우측 상단에 Sign Up 을 통해서 가입하시길 바랍니다.

공개하면 무료로 사용할 수 있습니다.



왼쪽 하단에 Free Plan 을 클릭해서 무료로 사용할 수 있습니다.



가입후 로그인을 해야 제가 올린 코드를 쉽게 찾을 수 있습니다.


2. 장점

사용시 우측 상단에 New Pen 을 클릭해서 코드를 작성하시면 됩니다.

기본적으로 새개의 패널이 열립니다. 


기본적으로 코드하이라이팅 되어 보여집니다.

html, css, js 의 앞에보면 기어 아이콘이 있습니다. html 을 클릭해보겠습니다.



html 에 관련된 설정을 할 수 있습니다.

좋은 점은 HTML Preprocessor 를 클릭하면 바로 이렇게 html 뿐만이 아니라 Haml, Markdown, Slim, Jade 를 모두 사용할수 있다는 점입니다.


하나씩 볼까요?

html

1.HTML Preprocessor : 위에서 보듯 다른 문법으로로 작성할수 있습니다.

2. Add Class(es) to <html> : html 에 클래스를 추가해서 넣을 수 있습니다.

원래 이런곳은 <body> 에 넣는 코드부터 작성을 합니다. 하지만 코드펜은 html 에 클래스를 넣는것까지 지원합니다.

3. Stuff for <head> : head 태그에 넣는 부분도 지원합니다.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

는 제가 수동으로 넣은것이고 하단에 Insert the most common viewport meta tag 를 클릭하시면 viewport 메타태그를 자동으로 넣어줍니다.

4. PEN TITLE : 사이트 제목을 넣는곳입니다.

5. PEN DESCRIPTION : 사이트 설명을 넣는곳입니다. 

6. TAGS : 코드에 태그를 넣을수 있습니다. 


작성하고 요소보기로 봤습니다.

위에서 작성한 것 모두 <head> 태그안에 들어갔습니다.


좀 더 내려보면 html 에 클래스도 추가되었고, 추가한 meta 태그들도 보입니다.



html 작성시 젠코딩도 지원합니다.

젠코딩으로 작성하고 탭을 누르면 우측처럼 변환되어서 입력되어집니다.


css

css 를 한번 볼까요?

마찬가지로 less, scss, sass, stylus, postcss 등 다양한 문법의 코드를 넣을수 있습니다.

또한 프리픽스까지 자동으로 넣을수 있습니다.

Add External CSS 에는 추가적으로 css 를 넣을수 있구요.

맨 아래 Quick-add 를 클릭하시면 Bootstrap, Foundation, Animate.css 를 간편하게 추가할 수 있습니다. 그림에는 Bootstrap 코드를 추가한 것입니다.


javascript

자바스크립트도 CoffeeScript, LiveScript, TypeScript, Babel 까지 사용할 수 있습니다.



또 스크립트를 추가할때도 마찬가지로 많은 스크립트를 지원하니 클릭만으로 간단이 삽입할 수 있습니다.




Behavior

마지막에 Behavior 를 클릭해도 되고 화면 상단에 Settings 를 클릭해도 아래화면이 나옵니다.

코드 들여쓰기, 자동완성 등을 설정할 수 있습니다.

 


코드펜은 무료로 사용이 가능하고 모바일까지 모두 지원하니 잘 사용하시기 바랍니다.



신고

댓글