본문 바로가기

자바스크립트/기타등등

온라인 에디터 6종류 (HTML CSS Javascript Jquery mySQL 등 편집)

반응형


여러분은 HTML, CSS, JS, jQuery 등의 코드를 온라인에서 에디팅할때 어떤 에디터를 사용하시나요 ?

이전에 JsBin이라는 온라인 에디터의 사이트를 알려 드린적이 있었는데 오늘은 Jsbin과 더불어 몇가지 많이 사용되고 있는 온라인 에디터사이트를 알려 드리겠습니다.


1.CodePen


.mkt{
  color:red;
  background-color:yellow;
  width:300px;
  height:50px;
  line-height:50px;
  font-size:31px;
  text-align:center;
  margin:20px;
  border:1px solid #eee;
  box-shadow:3px 3px 3px #999;
}

See the Pen btyAl by yoonsj (@yun1653) on CodePen.

CodePen은 어두운 배경톤을 좋아하는 저에게는 꽤나 깔끔한 온라인 코드 에디터로 보입니다. 또한 여러가지 효과를 가진 우수한 샘플들을 준비해 놓고 있어서 코드를 배우시는 분들에게는 좋은 코드에디터 입니다.

바로 위에 보이는 화면은 코드작성후 embed 시켜본 것인데요. 탭을 눌러 보시면 코드도 나오고 결과화면도 나옵니다. 일단 코드를 작성하고 Save를 하면 Share 버튼이 Save 버튼옆에 나타납니다. 트위터, 페이스북, 구글플러스로 공유할 수 있고 GitHup의 Gist로 저장할 수도 있습니다.


바로 위의 화면은 gist에서 다시 공유한 것입니다.
사실 GitHub나 Gist의 flow를 잘 알지 못해서 좀 애먹었지만 그런데로 코드는 공유할 수 있었습니다.

http://codepen.io/pen/


2. LiveWeave

제가 두번째로 자주 이용하는 곳이 LiveWeave인데요. 그 이유는 코딩의 자동완성 기능 때문입니다.  예를 들어 'fo'를 타이핑하면 "font, font-size, font-family, font-style...." 등등이 쭉 나오는 박스가 떠서 선택할 수 있어서 좋습니다.

마치 Sublime text를 사용하는 것처럼 스펠링이 틀려서 에러가 나오는 경우를 대폭 줄여 줍니다.

http://liveweave.com/


3.JsBin


JS Bin

로컬 에디터를 열기는 귀찮고 간단하게 결과를 확인하면서 코딩하고자 할때 많이 사용할 듯합니다. 여기도 상당히 많은 사람들이 이용하고 있습니다. 여기도 위에 보시는 바와 같이 code Share가 가능합니다. 제가 "Nice to meet you"라는 코드를 작성하고 여기 블로그로 embed 시킨 것입니다. 여기서 코드를 수정하면 바로 옆의 결과란에서 확인이 가능합니다.

http://jsbin.com/


4.JsFiddle



JS Fiddle도 많은 사람들이 사용하고 있습니다. 좌측의 사이드바를 이용해서 여러가지 옵션들을 변경할 수도 있으며 역시 share도 할 수 있습니다. 바로 위의 그림은 공유한 것입니다. 탭을 눌러보면 코드와 결과가 나옵니다. 상단메뉴의 TydeUp을 통해 코드를 멋지게 인덴팅해서 정렬을 해줄 수도 있습니다.

http://jsfiddle.net/


5.Dabblet

이곳은 제가 사용해보지는 않았는데 외국에서는 많이들 사용한다고 합니다. 죄송하지만 구글링을 통해서 어떤곳인지 알아보셔야 할것 같습니다.

http://dabblet.com/


6.SQL JSfiddle

이곳은 본 포스팅에서 유일하게 SQL을 온라인에서 연습해 볼수있는 사이트입니다. DB를 만들고 테이블을 만들고 제거하고 등등을 할 수 있습니다. 다만 좀 느리다는 단점이 있습니다. 이곳 역시 제가 거의 사용해보지 않아서 잘 모릅니다. 구글링을 해 보셔야 할듯..

http://sqlfiddle.com/

반응형