2021 년 10 가지 최고의 무료 온라인 HTML 편집기 및 테스터 도구

10 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 편집자 / 테스터 목록
  • 최고의 HTML 편집기 비교
  • # 1) JSFiddle
  • # 2) JS Bin
  • # 3) 어도비 드림위버
  • # 4) 코드 펜
  • # 5) 커피 컵
  • # 6) 콤포 저
  • # 7) 블루 그리폰
  • # 8) CKEditor
  • # 9) 대 블릿
  • # 10) CSSDesk HTML 편집기
  • 기타 온라인 HTML 편집기
• 결론
  • 추천 도서

최고의 HTML 편집자 / 테스터 목록

1. JSFiddle
2. JS 빈
3. 어도비 드림위버
4. Codepen
5. 커피 컵
6. KompoZer
7. 블루 그리폰
8. CKEditor
9. Dabblet
10. CSSDesk HTML 편집기

최고의 HTML 편집기 비교

# 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

# 2) JS Bin

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

풍모:

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

장점 :

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

단점 :

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

도구 비용 / 계획 세부 정보 : 무료 버전을 사용할 수 있습니다. 프로 버전은 연간 $ 130 또는 월 $ 17부터 시작합니다.

웹 사이트 : JSBin

# 3) 어도비 드림위버

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

풍모:

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

장점 :

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

단점 :

Android에서 bin 파일을 보는 방법

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

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

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

# 4) 코드 펜

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

풍모:

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

장점 :

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

단점 :

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

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

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

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

웹 사이트 : Codepen

# 5) 커피 컵

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

풍모:

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

장점 :

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

단점 :

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

도구 비용 / 계획 세부 정보 : 49 달러. 무료 평가판을 사용할 수 있습니다.

웹 사이트 : CofeeCup

# 6) 콤포 저

deque C ++이란?

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

풍모:

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

장점 :

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

단점 :

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

도구 비용 / 계획 세부 정보 : 비어 있는.

웹 사이트 : KompoZer

# 7) 블루 그리폰

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

풍모:

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

장점 :

• 강력한 애플리케이션.

단점 :

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

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

• 무료 버전을 사용할 수 있습니다.
• 기본 라이선스는 $ 87부터 시작합니다.

웹 사이트 : 블루 그리폰

# 8) CKEditor

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

풍모:

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

장점 :

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

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

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

웹 사이트 : CKEditors

# 9) 대 블릿

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

풍모:

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

장점 :

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

단점 :

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

도구 비용 / 계획 세부 사항 : 비어 있는

웹 사이트 : Dabblet

# 10) CSSDesk HTML 편집기

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

풍모:

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

장점 :

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

도구 비용 / 계획 세부 사항 : 가입은 무료이지만 더 많은 고급 기능을 사용하려면 연락해야 할 수도 있습니다.

웹 사이트 : CSSDesk HTML 편집기

추가 도구

# 11) TinyMCE : 풍부한 기능을 갖춘 오픈 소스 텍스트 편집기입니다. JavaScript 라이브러리와 쉽게 통합되도록 설계되었습니다. 여러 브라우저와 운영 체제를 지원합니다.

웹 사이트 : TinyMCE.

# 12) HTML 키트 : 이 HTML 코드 편집기는 Windows 운영 체제 만 지원합니다. 언어의 경우 HTML, XHTML 및 XML을 지원합니다. 평가판을 사용할 수 있습니다. $ 49부터 시작하는 가격으로 구입할 수 있습니다.

웹 사이트 : HTML 키트

# 13) Mobirise : Mobirise는 웹 사이트 빌더입니다. 완전한 웹 사이트 구축을 위해 드래그 앤 드롭 기능을 지원합니다. 따라서이 도구의 도움으로 코딩없이 웹 사이트를 구축 할 수 있습니다. 무료로 제공됩니다.

웹 사이트 : Mobirise

# 14) Google Web Designer : HTML5를 지원합니다. Windows, Linux 및 Mac OS에서 사용할 수 있습니다. 특히 HTML5 광고 및 HTML5 콘텐츠를 만드는 데 사용됩니다.

웹 사이트 : Google Web Designer

# 15) Microsoft FrontPage : Microsoft의 Windows 용 WYSIWYG 편집기입니다. Microsoft Expression Web과 SharePoint Designer (데스크톱 용)라는 두 개의 편집기로 대체되었으며 웹 기반 인 SharePoint Designer로 대체되었습니다.

웹 사이트 : Microsoft FrontPage

기타 온라인 HTML 편집기

결론

JSFiddle은 클라우드 기반 도구이며 무료로 사용할 수 있습니다. Codepen은 상용 도구이지만 가격 대비 좋은 기능을 제공합니다. Codepen과 JSFiddle은 모두 개발자들에게 인기가 있습니다.

CoffeeCup은 Windows OS 용 HTML 편집기입니다. 온라인 또는 클라우드 기반 HTML 코드 편집기를 사용하고 싶지 않다면 CoffeeCup이 최선의 선택입니다. BlueGriffon은 유료 옵션으로 좋은 기능을 제공합니다. 이 자습서에서 언급 된 다른 모든 HTML 코드 편집기는 최상위 위치에 있습니다.

요구 사항 및 HTML 코드 편집기의 기능에 따라 이러한 도구를 선택할 수 있습니다.

추천 도서

• 최고의 소프트웨어 테스트 도구 2021 (QA 테스트 자동화 도구)
• 14 최고의 온라인 컴퓨터 공학 학위 프로그램 (2021 목록)
• DevOps 테스트를위한 10 가지 연속 테스트 도구 (2021 목록)
• 2021 년에 가장 인기있는 HTML 검사기 온라인 도구 15 가지
• 2021 년 상위 30 개 이상의 웹 애플리케이션 테스트 도구 (종합 목록)
• 2021 년 상위 7 대 데이터 분석 기업 (업데이트 된 2021 목록)
• 10 개의 BEST APM 도구 (2021 년 애플리케이션 성능 모니터링 도구)
• 프로그래밍을 없애기위한 2021 년 상위 10 개의 데이터 과학 도구