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

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

12,252  
목차
  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 2차원 금발 소녀 엘리베이터 댄스 새글
20
20
dance 레드벨벳 웬디 칠 킬 댄스 (Red Velvet WENDY - Chill Kill) 새글
19
19
ucc 층간 소음으로 입주민들 다 내쫒는 얌체 4층 입주민 고양이 [동물/유머] 새글
19
19
sports 축구 U23 대한민국, 승부차기 끝에 호주 제압하고 WAFF (서아시아 잼피언십) 우승
19
19
sports 축구 월드컵 2차 예선 태국 원정 0:3으로 이기긴 했지만...
27
27
talk 개발자 님들, $_POST 귀신 만나본 적 있으신가요?
38
38
vote AI가 출현과 홈페이지 광고 수익 관계 설문조사 설문 중
45
45
sports 김은선 프로 님이 알려주는 올바른 골프 스윙 자세
35
35
ucc 코딩 날로 먹으려는 학생 참교육하는 ChatGPT G선생님
68
68
talk 엑셀 스크롤바 상하 수직 이동 엄청 불편 ㅡㅡ;
38
38
dance 백프로 100% 님 위 아래 댄스
48
48
1/149
목록
찾아주셔서 감사합니다. Since 2012