• Q&A
  • 회원가입
  • 로그인

[web] 코드펜 같은 웹 개발 도구 사이트 모음 ※ 코딩 결과물 바로 확인

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

 

CodePen

https://codepen.io/pen/

 

Codesandbox 

https://codesandbox.io/

 

JSbin

https://jsbin.com/

 

JSfiddle

https://jsfiddle.net/

 

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

https://repl.it/

 

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

 

... 계속 업데이트 중.

 

 

PS. 

개발 환경 솔루션

 

구름 IDE

https://ide.goorm.io/

 

 

PS. 

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>


※ emmit 지원 여부

・codepen, jsbin, jsfiddle : 작동 O

・repl : 작동 X

 

코딩 공부는 「홈짱닷컴」에서...

이름
비밀번호
자동등록방지

방문자 수

오늘 1,739
어제 1,907
최대 2,271
전체 905,632
Since 2012