웹 문서를 만들기 위해 HTML 태그와 CSS, 자바스크립트 소스를 입력하는 프로그램이 필요합니다.
그 프로그램을 웹 편집기(Web Editor) 또는 코드 편집기(code editor)라고 합니다.
컴퓨터에 기본적으로 깔려 있는 메모장도 웹 편집기로 사용이 가능하지만
기능 측면에서는 좋지 않습니다.
코드의 태그와 속성, 일반 텍스트를 다른 색상으로 구분을 해주거나
자동 완성 기능, 오류 검사 기능 그런 것이 없기 때문입니다.
그렇다면
어떤 웹 편집기가 있을까요 ?
윈도우용 웹 편집기에는
노트패드++ (Notepad++)
https://notepad-plus.softonic.kr/
Notepad++
완전한 소스 코드 편집기와 메모장 대체
notepad-plus.softonic.kr
에디트 플러스(Edit+)
에디트플러스 - 윈도우용 문서 편집기, HTML 편집기, PHP 편집기, Java 편집기
에디트플러스 문서 편집기 에디트플러스 홈페이지에 잘 오셨습니다. ● 구입하기 ● 에디트플러스 문서 편집기 5.5 다운로드 (2021-08-11) New! --> ● 최신 버그 패치 파일 - 5.5 patch build 3612 (2021-10-11)
www.editplus.com
macOS용 웹 편집기에는
텍스트메이트(Textmate)
TextMate: Text editor for macOS
Multiple Carets Making multiple changes at once, swapping pieces of code, and a lot more is made trivial with TextMate’s easy way to add multiple insertion points. File Search Select what you want to search, what you want to search for, and TextMate will
macromates.com
코다(Coda)
https://coda.kr.uptodown.com/mac
Coda (Mac)
Mac을 위한 Coda 최신 버전을 다운로드하세요.. 웹 개발자들에게 아주 좋은 코드 편집기입니다.. Coda는 자체 인터페이스에 웹 개발자들에게 꼭 필요한 기능들이 상당히 많이 담겨 있어 탄탄한 소스
coda.kr.uptodown.com
비쥬얼 스튜디오 코드(Visual Studio Code)
해당 웹 편집기는 윈도우와 macOS 모두 사용 가능한 무료 소프트웨어이다.
또한 파이썬이나 Node.js 등의 프로그래밍 언어에도 사용할 수가 있어
많은 개발자들이 사용하고 있는 SW이다.
이에 대한 자세한 내용은 아래에 첨부해 놓은
이전 글을 참고하도록 하자
▼자세한 설치는 아래 링크에서 확인▼
Visual Studio Code 쉬운 설치/ VSCode 코드 편집기 추천 및 설치/ Vscode 한글 설정방법 / VSCode 코드 확대
Visual Studio Code란? 윈도우(Windows), 맥(Mac OS), 리눅스(Linux) 운영체제 모두에서 사용 가능한 에디터로 쉽게 말하면 '소스 코드 편집기'이다. 이는 Microsoft(MS)에서 개발하였다. 또한 유료인 Visual Stu..
parkjh7764.tistory.com
이 밖에도, 우리가 흔히 사용하는 브라우저인 웹 페이지에서도
웹 편집기를 사용할 수 있다. 이는 웹 기반의 편집기이다.
웹 기반 편집기는 PC에 별도 설치가 필요 없이 브라우저를 통해
링크로 들어가게 되면 웹에서 바로 코드를 작성할 수 있다.
장점은 다른 사람과 소스 공유가 편리하고 초보자 코딩 연습용으로 적합하다.
웹 기반 편집기 추천 사이트로는 아래와 같다.
Codepen (codepen.io)
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
JSFiddle (jsfiddle.net)
JSFiddle - Code Playground
jsfiddle.net
Liveweave (liveweave.com)
Plunker
Plunker is loading… No files were harmed in the making of this website.
plnkr.co
Plunker (plnkr.co)
Plunker - Helping you build the web
Plunker is loading… Everything will be all right.
plnkr.co
추천 사이트는 외국 사이트이기에 영어 기반으로 설명이 적혀있다.
이는 '구글 크롬'으로 들어가면 영어 번역이 가능하니
영어 번역의 어려움을 느끼시면 크롬으로 들어가시는 것을 권장드린다.
댓글