[web] 코드펜 같은 웹 개발 도구 사이트 모음 ※ 코딩 결과물 바로 확인 + Emmet 에밋 (= 빠른코딩/단축코딩/빠른코드/단축코드 플로그인)

1. 프런트엔드 (FrontEnd : 앞단) 개발 도구
2. 개발 환경 솔루션
3. Emmet (에밋) ★ - 빠른 코딩 지원 플러그인

프런트엔드 (FrontEnd : 앞단) 개발 도구 

 

CodePen ★

https://codepen.io/pen/

 

Codeply

https://www.codeply.com/

 

Codesandbox 

https://codesandbox.io/

 

Flems

https://flems.io/

 

JSbin ★

https://jsbin.com/

 

JSfiddle ★

https://jsfiddle.net/

 

Jsitor

https://jsitor.com/

 

Repl ★ (※ Backend 코딩 언어도 가능.)

https://repl.it/ (= https://replit.com/)

 

---

PS. emmit 지원 여부 

 

• codepen, jsbin, jsfiddle : 지원 O
• flems, jsitor, repl : 지원 X

 

PS. HTML/CSS/JS 결과물 바로 확인 가능.

... 계속 업데이트 중.

개발 환경 솔루션

 

구름 IDE

https://ide.goorm.io/

 

Emmet (에밋) ★ - 빠른 코딩 지원 플러그인

※ HTML, XML, XSL 문서 편집 시 유용.

ol>li*3  (Tab키 누르면 변환.)

 

<ol>

  <li></li>

  <li></li>

  <li></li>

</ol>

---

div.container>div.item.item${$}*10 (Tab 키 누르면 변환.)

 

<div class="container">

  <div class="item item1">1</div>

  <div class="item item2">2</div>

  <div class="item item3">3</div>

  <div class="item item4">4</div>

  <div class="item item5">5</div>

  <div class="item item6">6</div>

  <div class="item item7">7</div>

  <div class="item item8">8</div>

  <div class="item item9">9</div>

  <div class="item item10">10</div>

</div>

PS. Emmet (에밋) 사용법 자세히 보기