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

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

12,963  
목차
  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 이주은 치어리더 님 질풍가도 댄스 새글
talk 라온보드, 그누커머스, 그누보드M, 그누보드6
news 그누보드 운영진, 그누보드6 추가 개발 접고 그누보드5에 역량 집중
news 나리야5 (= 신 나리야 메리골드) 0.3 버전 곧 출시
ucc 프로듀사 전편요약 4시간 봤는데, 재밌네요.
talk 독신 남녀분들 밤에 주로 뭐해요?
web (웹호스팅/가상호스팅) 이용 중 속도 느릴 때 체크할 사항
ucc 어느날 여동생 3명이 생겼다. EP5 (완결) - 돈을 되찾다. [웹드라마] 여동사친즈 몰ᄋ…
dance 이주은 치어리더 님 못 보던 머리스타일 댄스
girl 붕붕붕 댄스 시동 거는 청바지 패션 전소미 님
1/154
목록
찾아주셔서 감사합니다. Since 2012