Home-theater-designers
사용하는 모든 웹사이트는 HTML에 의존합니다. 웹 개발자는 JavaScript, Python, CSS 및 서버 측 스크립팅 기술이 필요하지만 HTML은 이 모든 것을 함께 보유합니다.
HTML이 없으면 웹도 없으므로 웹을 만들고 편집하는 방법을 알아야 합니다. 컴퓨터에 HTML 코드 테스트 시스템을 설정하는 것보다 브라우저에서 코드를 테스트하는 것이 더 간단합니다.
작은 HTML 스니펫을 다루든 전체 웹사이트 프로젝트를 다루든 온라인 HTML 편집기가 이상적입니다.
온라인 HTML 편집기를 사용해야 하는 이유
브라우저 기반 HTML 편집기를 사용하는 것은 다음과 같은 이유로 메모장++과 같은 것보다 훨씬 합리적입니다.
- 온라인 HTML 편집기는 웹 브라우저에서 직접 실행됩니다.
- HTML 코드를 온라인으로 테스트 --- 코드가 예상대로 실행되는지 확인
- 실시간 웹 미리보기 보기 ---편집할 때 미리보기 업데이트
- 워크플로 간소화 --- 더 이상 저장, 브라우저 로드, 편집기로 다시 전환 및 반복
- 플랫폼에 구애받지 않음 ---웹 연결이 있는 모든 장치에서 실행됩니다.
이 마지막 점은 매우 중요합니다. 즉, PC에서 크롬북처럼 쉽게 웹페이지를 개발할 수 있습니다. Android 태블릿이나 Raspberry Pi와 같은 50달러짜리 컴퓨터를 사용할 수도 있습니다.
HTML 코딩은 프로그래밍과 개발을 이해하기 위한 접근 가능하고 직접적인 관문입니다. HTML 코드를 지속적으로 테스트해야 합니다. 브라우저 창의 실시간 결과보다 더 나은 것이 있을까요?
현재 사용 가능한 최고의 온라인 HTML 편집기를 살펴보겠습니다.
1. 코드펜
CodePen은 웹 개발자를 위한 '소셜 개발 환경'으로, 기본적으로 협업 기능을 갖춘 온라인 편집기입니다. 심플한 레이아웃을 제공합니다. HTML용 패널, CSS용 패널, JavaScript용 패널 및 실시간 미리보기용 패널이 있습니다. 모든 패널 크기는 가장자리를 드래그하여 조정할 수 있습니다.
웹 코드를 조정하기 위한 개별 놀이터와 같은 '펜'을 만들 수 있습니다. 여러 펜을 컬렉션으로 그룹화할 수 있습니다.
기본 사용을 위한 등록은 무료이지만 개인 펜 및 컬렉션에는 다음이 필요합니다. 프로 계정 . 이것은 /월부터 시작하며 자산 호스팅, 포함 가능한 테마, 실시간 협업 및 CodePen의 전체 웹 개발 IDE에 대한 액세스를 포함합니다.
많은 사람들이 CodePen을 최고의 온라인 HTML 편집기라고 생각합니다. 귀하의 요구 사항에 맞는지 확인하십시오.
2. JSFiddle
JSFiddle은 말 그대로 JavaScript를 다룰 수 있는 샌드박스입니다. JavaScript가 HTML 및 CSS와 함께 사용된다는 것을 알고 있을 것입니다. 즉, JSFiddle을 사용하면 JSFiddle의 편집 인터페이스를 사용하여 세 가지 모두를 한 번에 편집할 수 있습니다.
원한다면 JavaScript를 완전히 건너뛸 수 있습니다.
JSFiddle의 좋은 점은 사이드바에 외부 요청을 추가할 수 있다는 것입니다. 이를 통해 HTML을 향상시키기 위해 오프사이트 JavaScript 및 CSS 파일을 포함할 수 있습니다. 또한 코드의 들여쓰기를 자동으로 정리하는 깔끔한 버튼도 유용하며 공동 작업을 클릭하면 실시간 온라인 공동 작업이 가능합니다.
유일한 단점은 미리보기 패널을 업데이트하려면 실행 버튼을 클릭해야 한다는 것입니다.
삼. JSBin
JSFiddle에 대한 더 간단하고 깔끔한 대안으로 JSBin을 고려하십시오. 상단 도구 모음으로 패널을 전환하여 HTML, CSS 및 JavaScript의 모든 조합을 편집할 수 있습니다. 유연성을 최대화하기 위해 필요에 따라 미리보기 패널과 콘솔 패널을 전환할 수도 있습니다.
인스타그램 피드를 최신으로 변경하는 방법
그러나 JSFiddle을 사용하면 외부 CSS 및 JavaScript 리소스를 연결할 수 있지만 JSBin은 미리 정의된 JavaScript 라이브러리로 제한합니다. jQuery에서 React, Angular 등에 이르기까지 선택이 좋습니다.
JSBin은 무료이며 계정이 필요하지 않지만 프로 계정 고급 기능을 위해. 여기에는 비공개 저장소, 사용자 지정 포함, 자산 호스팅, Dropbox 동기화 및 JSBin을 통해 게시된 페이지의 가상 URL이 포함됩니다.
4. 라이브위브
Liveweave는 이전 편집기와 시각적으로 유사하며 만족스러운 사용자 인터페이스를 제공합니다. JSFiddle과 마찬가지로 Liveweave는 실시간 협업을 허용하고 JSBin과 마찬가지로 jQuery와 같은 사전 정의된 타사 리소스에 연결할 수 있습니다.
그러나 몇 가지 독특한 기능도 있습니다. Lorem Ipsum Generator는 현재 커서 위치에 자리 표시자 텍스트를 만듭니다. CSS 탐색기는 CSS 스타일을 생성하기 위한 WYSIWYG 도구를 제공하고 색상 탐색기는 완벽한 색상을 선택하는 데 도움이 됩니다. 한편 벡터 편집기를 사용하면 사이트에 대한 벡터 그래픽을 만들 수 있습니다.
강조 표시된 댓글의 의미는 무엇입니까?
5. HTML하우스
HTMLhouse는 HTML에만 관심이 있는 경우(즉, CSS 또는 JavaScript가 없는 경우) 좋은 옵션입니다. 깔끔하고 미니멀하며 왼쪽은 편집, 오른쪽은 실시간 미리보기로 세로로 나뉩니다.
HTML을 게시하고 비공개(비공개 URL을 통해) 또는 공개(추가된 HTMLhouse의 찾아보기 페이지 ). 간단하지만 효과적이며 온라인 HTML 편집기가 작동하고 탁월합니다.
HTMLhouse는 다음의 사람들이 만들고 유지 관리합니다. 쓰기.as , 산만하지 않은 온라인 쓰기 도구. 자신의 사이트 콘텐츠를 작성할 계획이라면 이 점을 염두에 두십시오.
6. HTMLG
또 다른 옵션 HTMLG는 HTML에 대해 코드 및 미리보기 창을 사용하는 것과 동일한 패턴을 따릅니다. 그러나 이 도구는 동일한 통합 프로젝트 내에 CSS와 JavaScript를 포함하지 않습니다. 오히려 편집하려면 새 탭을 열고 별도의 프로젝트로 편집해야 합니다.
따라서 브라우저에서 순수한 HTML 조정 및 테스트 코드에 이상적입니다. CSS 편집을 통합하려는 경우에는 더 적습니다.
HTMLG로 전체 웹 페이지를 테스트하는 경우 300단어 제한이 있음을 유의하십시오. 이를 늘리려면 월 .80부터 시작하는 광고 없는 프리미엄 버전에 가입할 수 있습니다.
7. 다블렛
온라인 HTML 편집기에 대해 약간 다른 방식을 제공하는 Dabblet은 화면을 3/4개의 창이 아닌 2개의 창으로 분할합니다. 따라서 HTML 및 결과에 대한 보기와 CSS 및 결과에 대한 별도의(그러나 연결된) 보기가 있습니다.
이렇게 하면 더 많은 공간이 제공되어 코드와 미리 보기를 더 명확하게 볼 수 있습니다. 또한 내장된 w3.org HTML 및 CSS 유효성 검사기가 모든 문제를 강조 표시합니다.
사이트 코드를 테스트하기 위해 깨끗한 데스크탑 공간이 필요한 경우 이것이 가장 적합한 HTML 편집기일 수 있습니다.
최고의 온라인 HTML 편집기를 사용하여 기술 향상
HTML에 대한 유일한 노출이 10년 전에 배운 것이라면 지금이 따라잡을 때입니다. HTML5는 2014년에 출시되었으며 몇 가지 새로운 표준과 기능을 도입했습니다. 어디서부터 시작해야 할지 모르겠다고요? 이러한 필수 새 HTML5 요소를 확인하십시오.
HTML5 웹 디자인 및 개발의 모범 사례를 배우고 싶으십니까? 이것들을 확인하십시오 고품질 HTML 코딩 예제가 있는 웹사이트 . 또한 웹 개발 기술을 업그레이드하기 위한 다른 도구도 살펴보아야 합니다.
공유하다 공유하다 트위터 이메일 알아야 할 Windows 명령 프롬프트(CMD) 명령 15가지명령 프롬프트는 여전히 강력한 Windows 도구입니다. 다음은 모든 Windows 사용자가 알아야 할 가장 유용한 CMD 명령입니다.
다음 읽기 관련 항목- 프로그램 작성
- 텍스트 에디터
- 웹 개발
- 위지윅 에디터
- HTML5
- 스크립팅
보안, Linux, DIY, 프로그래밍 및 기술 설명을 위한 편집자이자 데스크탑 및 소프트웨어 지원에 대한 광범위한 경험을 가진 정말 유용한 팟캐스트 프로듀서입니다. Linux Format 매거진의 기고가인 Christian은 Raspberry Pi 땜장이이자 레고 애호가이자 복고풍 게임 팬입니다.
크리스찬 카울리가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.