• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

11,218  
목차
  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 (에밋) 사용법 자세히 보기


분류 제목
dance 머리부터 발 끝까지~?뒷말 뭔데? 댄스 새글
dance 안 보면 후회하는 긴~거 입니다 댄스 새글
dance 에피소드 (EPISODE) 예지 님 댄스 - TOMBOY (톰보이) & HandClap (핸드클랩) 새글
girl 하지원 치어리더 님 기쁨의 고속발동동
ucc 내시 똥군기 - 꼬우면 빨리 떼시던가.... [유머]
laragon Laragon (라라곤) - (htm/html) 확장자 파일에서 PHP 코드 사용 허용 설정
ucc 저기요~ 엉덩이 한 번 만져봐도 돼요 ?
dance 안지현 치어리더 님 제로투 댄스
dance 하이큐티-제이 (HI CUTIE-J) 윤정, 유진 님 댄스 - BBHMM & No Thanks & 챔피온
dance 해시태그 (Hash Tag) 수빈 님 댄스 - 어때보여? & ㅇㅇ
news 카카오 인코더 (Cacao Encoder)에 내장된 파인드 매치팝 (Find matchpop) 악성 광고프로…
1/137
목록
찾아주셔서 감사합니다. Since 2012