무료 웹에디터 10개, 최고의 무료 웹에디터 2021 Html Editors

Best Free Online Html Editors

 

귀하의 요구 사항에 가장 적합한 HTML 편집기를 선택하려면 최고의 온라인 HTML 편집기 및 테스터 도구에 대한이 유익한 검토 및 비교를 읽으십시오.

 

HTML 코드 편집기는 코드 작성에 도움이되는 편집기입니다. 메모장과 같은 간단한 텍스트 편집기를 사용하여 HTML 파일을 만들 수 있습니다.

그러나 HTML 코드 편집기를 사용하면 코드를 지원하고 태그에 '닫는 대괄호'를 추가하고 강조 표시 및 색상 코딩을 할 수 있습니다. 강조 표시 및 색상 코딩은 파일을 업데이트하는 동안 도움이됩니다. HTML 코드 편집기는 입력 속도를 높입니다.

 

WYSIWYG는 What You See Is What You Get을 의미합니다. . 이러한 편집기를 사용하면 HTML 코딩에 대한 많은 지식 없이도 웹 페이지에서 작업 할 수 있습니다. 결과 페이지에서 구성 요소를 변경할 수 있으며 편집기가이를 코드에 반영하거나 편집기가 동일한 코드를 생성합니다. 이러한 편집기는 실시간 결과를 제공하고이 결과 페이지를 업데이트하는 드래그 앤 드롭 기능을 제공합니다.

HTML 코드 편집기의 일반적인 기능은 다음과 같습니다.

• 자동 완성.
• HTML 엔티티를위한 라이브러리 추가.
• Site Explorer의 도움으로 계층 적 패턴으로 파일을 볼 수 있습니다.
• 일부 편집자는 파일을 더 빨리 업로드 할 수있는 내장 FTP가 있습니다.
• 고급 HTML 편집기는 CSS 및 JavaScript와 같은 다른 언어를 지원합니다.
• 대부분의 편집기는 분할 화면보기를 제공하므로 절반 화면에서는 코드 출력을, 화면의 다른 절반에서는 실제 코드를 볼 수 있습니다. 창문을 전환 할 필요가 없습니다.
• 검색 및 교체 기능. 이 기능은 HTML 코드 편집기에 따라 고급화 할 수 있습니다. 고급 기능을 사용하면 특정 파일 또는 전체 웹 사이트를 통해 특정 단어 또는 키워드를 검색 할 수 있습니다.
• 또 다른 중요한 기능은 구문 오류를 강조하는 것입니다.

많은 온라인 HTML 코드 편집기를 사용할 수 있습니다. 이 편집기는 소프트웨어 설치 및 환경 설정의 필요성을 건너 뜁니다. 또한 이러한 편집기의 대부분은 기본 기능을 무료로 제공합니다. 고급 기능을 사용하려면 약간의 비용을 지불해야하지만 이는 선택 사항이며 필요에 따라 다릅니다.

 

최고의 HTML 편집기 비교

지원되는 언어특색플랫폼가격

JSFiddle	HTML CSS 자바 스크립트	다른 버전의 언어로 코딩 할 수 있습니다.	클라우드 기반	비어 있는
JS 빈	HTML CSS 자바 스크립트	HTML을 텍스트로 모바일에서 테스트	웹 기반	비어 있는
어도비 드림위버	HTML CSS 자바 스크립트	코드 힌트 통사론 강조 코드 색상	윈도우 맥	20.99 달러
Codepen	HTML CSS 자바 스크립트	은둔 파일 업로드 프로젝트 내장 빌더 여러 장치의 출력 교수 모드	클라우드 기반	비어 있는 초보자 : $ 8 개발자 : $ 12 슈퍼 : $ 26 팀 : 멤버 당 월 $ 12.
커피 컵	HTML CSS PHP 가격 인하	분할 화면 미리보기 내장 FTP WYSIWYG 편집기	윈도우	49 달러. 무료 평가판 사용 가능
KompoZer	HTML CSS	내장 FTP 테이블 관리 양식 관리	크로스 플랫폼	비어 있는
블루 그리폰	HTML CSS	단어 수에 대한 경고 Windows 및 Linux 용 색상 선택기	윈도우 리눅스 맥 OS	무료 버전 사용 가능 기본 라이선스 87 달러
CKEditor	HTML 및 텍스트 편집기	협동 여러 브라우저 지원	-	5 명의 사용자 : 무료 사용자 50 명 : $ 65 사용자 100 명 : $ 110
Dabblet	HTML CSS	접두사가 필요 없음	웹 기반	비어 있는
CSSDesk HTML 편집기	HTML CSS 자바 스크립트	CSS Desk Gallery에 포스트 생성 코드 캐스트 생성 및 시청	웹 기반	비어 있는 유료 버전에서 더 많은 기능을 사용할 수 있습니다.

# 1) JSFiddle

JSFiddle은 온라인 HTML 편집기입니다. HTML, CSS 및 JavaScript를 지원합니다.

JS Fiddle의 코드 조각은 바이올린이라고합니다.

 

풍모:

• 다른 버전이나 언어 유형을 선택할 수 있습니다. 예를 들어 HTML 패널에서 HTML 5, XHTML 1.0 Strict 및 HTML 4.01 Transitional 등과 같은 여러 옵션에서 문서 유형을 선택할 수 있습니다.
• JavaScript를 사용하면 라이브러리를로드 할 수 있습니다.

장점 :

• 사용하기 쉬운.
• HTML, CSS 및 JavaScript 외에도 JavaScript 프레임 워크에 대한 지원을 제공합니다.

단점 :

• Codepen과 같은 고급 기능이 없습니다.
• 간섭하는 광고가 있습니다.

웹 사이트 : JSFiddle

JSFiddle - Code Playground

# 2) JS Bin

JS Bin은 온라인 HTML 코드 편집기입니다. HTML, CSS 및 JavaScript를 지원합니다. 빠르게 작동하며 자동 종료 대괄호, 강조 표시 대괄호 등과 같은 많은 기능을 제공합니다.

풍모:

• HTML 코드를 텍스트 파일로 내보낼 수 있습니다.
• 코드에 대한 실시간 출력을 보여줍니다.
• 모바일 테스트를 지원합니다.
• 코드 캐스팅 및 사용자 지정 시작 코드와 같은 두 가지 추가 기능을 제공합니다.
• 위의 모든 기능은 무료 버전입니다. 프로 버전의 경우 Dropbox 동기화, 개인 저장소, 가상 URL 및 이메일 지원 등과 같은 더 많은 추가 기능을 제공합니다.

장점 :

• 키보드 단축키를 지원합니다.
• 패널을 숨길 수 있습니다.

단점 :

• 무료 버전으로 제한된 기능을 제공합니다.
• JavaScript에 대해서만 실시간으로 경고를 표시합니다.

 

무료 버전을 사용할 수 있습니다. 프로 버전은 연간 $ 130 또는 월 $ 17부터 시작합니다.

웹 사이트 : JSBin

JS Bin

---

# 3) 어도비 드림위버

Adobe Dreamweaver는 웹 사이트 개발 도구입니다. 최신 버전의 경우 CSS, JavaScript 및 일부 서버 측 프로그래밍 언어를 지원합니다. Windows 및 Mac OS에서 사용할 수 있습니다.

풍모:

• 구문 강조 (버전 5 이상).
• 코드 힌트.
• 코드 색상은 코드를 업데이트하는 동안 도움이됩니다.
• 모든 화면 크기에 맞는 웹 사이트를 개발할 수 있습니다.

 

장점 :

• 창을 전환 할 필요없이 코드 아래에서 출력을 볼 수 있습니다.
• 실수 강조.

단점 :

• Linux 시스템에서는 사용할 수 없습니다.
• 브라우저 기반보기를 제공하지 않습니다.

월 $ 20.99

웹 사이트 : 어도비 드림위버

---

# 4) 코드 펜

 

Codepen은 온라인 HTML 코드 편집기입니다. HTML, CSS 및 Java 스크립트에 사용할 수 있습니다. Codepen을 팀과 함께, 교육 및 작성을 위해 사용할 수 있습니다.

풍모:

• Codepen을 사용하면 개인 정보를 유지할 수 있습니다.
• 이미지, pdf, JavaScript, CSS 또는 짧은 동영상 파일과 같은 파일 업로드를 지원합니다.
• IDE와 같은 프로젝트 기능을 제공합니다. 자동 전처리, 파일 업로드, 웹 사이트 배포 및 기타 여러 기능이 있습니다.
• 여러 장치 및 컴퓨터에서 코드 출력을 볼 수 있습니다.
• Embed Builder의 도움으로 테마를 만들 수 있습니다.
• 교수 모드는 코드 공유 및 학생과의 실시간 출력 및 그룹 채팅과 같은 많은 기능을 제공합니다. 학생들은 그 작업을 저장하여 사본을 가질 수 있습니다.

장점 :

• 코드에 대한 도움이 필요하면 Codepen 팀이 Spectrum 채팅을 통해 도움을 제공합니다.
• 업로드 할 파일을 드래그 앤 드롭 할 수 있습니다. 사용하기 쉽습니다.

단점 :

• 무료 요금제로 기능을 거의 제공하지 않습니다.

도구 비용 / 계획 세부 정보 : 개인과 팀을위한 계획이 있습니다.

개인의 경우 다음과 같은 계획이 있습니다.

• 무료 계획.
• 연간 스타터 : 월 $ 8.
• 연간 개발자 : 월 $ 12.
• 연간 수퍼 : 월 $ 26.
• 팀의 경우 : 회원 당 월 $ 12.

웹 사이트 : Codepen

CodePen

 

---

# 5) 커피 컵

Windows 운영 체제 용 HTML 편집기입니다. 새로운 HTML 및 CSS 파일 생성을 지원합니다. 기존 웹 사이트에서도 작업 할 수 있습니다.

풍모:

• WYSIWYG 편집을 수행 할 수 있습니다.
• 기존 테마가 있으며 레이아웃을 사용할 준비가되었습니다.
• 브라우저 간 호환성을 제공합니다.
• 태그 참조 및 코드 완성 기능을 제공합니다.
• 분할 화면 미리보기 기능을 사용하면 그 아래에서 코드 출력을 볼 수 있습니다.
• 내장 FTP 로더가 있습니다.

 

장점 :

• HTML 외에 CSS, PHP 및 Markdown을 지원합니다.
• 테마는 사용자 정의가 가능하고 반응이 좋습니다.

단점 :

• 클라우드 기반 도구가 아니며 Windows 이외의 다른 운영 체제도 지원하지 않습니다.

49 달러. 무료 평가판을 사용할 수 있습니다.

 

웹 사이트 : CofeeCup

The HTML Editor | CoffeeCup Software

---

# 6) 콤포 저

KompoZer는 HTML 용 WYSIWYG 편집기입니다. KompoZer는 Nvu의 새 버전과 같습니다. 많은 버그를 수정하고 Nvu에 새로운 기능을 추가했습니다. Nvu 기반이므로 Mozilla Composer 코드베이스를 사용합니다. 오픈 소스 도구입니다.

풍모:

• 내장 FTP가 있습니다.
• 테이블 관리, 양식 관리 및 여러 웹 사이트에 대한 지원이 있습니다.
• 테이블 관리 기능으로 테이블을 생성 할 수 있습니다. 테이블 크기를 조정하고 행을 추가 할 수 있습니다.
• 템플릿을 제공합니다.

장점 :

• 사용하기 쉬운.
• 실시간 출력을 보여줍니다.

 

단점 :

• 현재 개발이 중단되었습니다.

웹 사이트 : KompoZer

KompoZer - Easy web authoring

---

# 7) 블루 그리폰

BlueGriffon은 Windows, Linux 및 Mac 용 웹 편집기입니다. HTML 및 CSS에 사용할 수 있습니다. 애드온을 통해 많은 기능을 사용할 수 있습니다.

풍모:

• 오디오, 비디오 및 양식에 대해서도 HTML 5 (HTML & XML)를 지원합니다.
• 검은 색과 밝은 색의 두 가지 테마 옵션이 있습니다.
• 단어 수에 대한 경고를 제공합니다.
• Windows 및 Linux 용 스포이드 및 색상 선택기.

장점 :

• 강력한 애플리케이션.
• 무료 버전을 사용할 수 있습니다.

단점 :

• 사용자 설명서를 구입해야합니다. 무료 버전이 아닌 기본 라이선스로 사용할 수 있습니다.
• 기본 라이선스는 $ 87부터 시작합니다.

웹 사이트 : 블루 그리폰

BlueGriffon

 

---

# 8) CKEditor

WYSIWYG 기능이있는 텍스트 편집기입니다. HTML 출력 형식화 기능이 있습니다. 웹 페이지에 직접 쓸 수 있습니다.

풍모:

• Chrome, Firefox, Safari 및 Microsoft Edge 등과 같은 여러 브라우저를 지원합니다.
• 열 크기 크기 조정과 같은 테이블 관리 기능.
• 키보드 단축키를 지원합니다.
• HTML 태그에 대한 HTML 출력 형식.

장점 :

• 맞춤법 검사.
• 자동 완성.

도구 비용 / 계획 세부 정보 :

• 사용자 5 명까지 무료입니다.
• 최대 50 명의 사용자, $ 65부터 시작합니다.
• 최대 100 명의 사용자, $ 110부터 시작합니다. 가격을 확인할 수 있습니다.

웹 사이트 : CKEditors

WYSIWYG HTML Editor with Collaborative Rich Text Editing

---

# 9) 대 블릿

Dabblet은 온라인 HTML 코드 편집기입니다. CSS에 더 많이 사용됩니다. Dabblet을 사용하려면 GitHub에 로그인하거나 GitHub에서 계정을 만들어야합니다.

풍모:

• 코드에 접두사를 추가 할 필요가 없습니다.
• 스타일 속성이있는 요소를 처리 할 수 ​​있습니다.
• .NET의 모든 스타일 시트를 처리 할 수 ​​있습니다.

장점 :

• 보기 설정을 조정할 수 있습니다.
• 글꼴 크기를 설정할 수 있습니다.

단점 :

• 제한된 브라우저 지원. IE9 +, Opera10 +, Chrome 및 Safari 4+에서 사용할 수 있습니다. 이것은 데스크탑 용입니다. 모바일 브라우저의 경우 Safari, Android 브라우저, Opera Mobile 및 Chrome을 지원합니다.
• JavaScript를 지원하지 않습니다.

 

웹 사이트 : Dabblet

dabblet.com

---

# 10) CSSDesk HTML 편집기

온라인 HTML 코드 편집기입니다. HTML, CSS 및 JavaScript에 대한 지원을 제공합니다. 코드를 파일로 다운로드 할 수 있습니다.

풍모:

• 많은 사람들과 실시간 코딩을 지원합니다.
• 생성, 시청 및 코드 캐스트를 지원합니다. Codecast는 편집기에서 입력 한 코드를 기록한 것입니다. 다른 사람이 입력 한 코드를 기록 할 수 있습니다.
• CSS Desk 갤러리에 우리의 창작물을 게시 할 수 있습니다.

 

장점 :

• 포럼 및 StackOverflow에서 피어와의 테스트 케이스 공유를 지원합니다.
• 테스트 케이스에 대한 도움말을 제공합니다.
• Twitter와 Facebook에서 작업을 쉽게 공유 할 수 있습니다.

가입은 무료이지만 더 많은 고급 기능을 사용하려면 연락해야 할 수도 있습니다.

웹 사이트 : CSSDesk HTML 편집기

CSSDesk - Online CSS Sandbox