[HTML 입문] 웹 브라우저와 웹 편집기

일반 문서와 웹 문서는 큰 차이점이 있습니다. 일반 문서는 내용을 입력하는 프로그램과 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다. 웹 문서를 작성하는 프로그램을 '웹 편집기(Web Editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(Web Browser)'라고 합니다.

웹 브라우저의 종류

웹 브라우저는 웹 사이트를 둘러볼 때 사용하거나 웹 편집기로 작성한 웹 문서를 화면에 표시해 주는 프로그램입니다. 현재 사용할 수 있는 웹 브라우저의 종류는 매우 다양합니다.

브라우저 이름	제조업체	특징
크롬	구글	빠른 업데이트를 통해 HTML5표준에 가장 발 빠르게 대응하고 있어 최근 가장 많이 사용되고 있는 브라우저입니다. HTML5 지원 정도가 555점 만점에서 525점으로 가장 높은 점수를 받고 있습니다.
파이어폭스	모질라	일반 사용자들보다 개발자들이 주로 사용하는 웹 브라우저로 개발 도구와 부가 기능들이 뛰어납니다.
인터넷 익스플로러	마이크로소프트	HTML5에 대한 지원은 취약하지만 아직까지도 국내에서 많이 사용되고 있는 브라우저입니다. 윈도우 7 서비스팩1부터 지원하기 시작한 IE11을 마지막으로 더 이상 개발되지 않고 있습니다.
엣지	마이크로소프트	마이크로소프트에서 인터넷 익스플로러 대신 HTML5를 지원하기 위해 새로 개발해 윈도우 10에서 기본으로 사용하는 웹 브라우저입니다.

이 외에도 애플의 '사파리'나 오페라 재단의 '오페라' 브라우저도 있습니다.

웹 편집기의 종류

웹 문서를 만들 때 HTML 태그를 입력하는 프로그램을 '웹 편집기'라고 합니다. 웹 편집기에 HTML 소스를 입력하면 그 내용을 웹 브라우저로 읽는데 이 웹 편집기는 메모장이든 전문 편집기 프로그램이든 텍스트를 입력할 수 있는 프로그램이면 모두 가능합니다.

편집기 종류	특징
텍스트 편집기	윈도우의 메모장이나 매킨토시의 텍스트 편집기, 한글, 워드를 이용해서 웹 문서를 작성할 수 있습니다. 사용자가 태그를 일일이 직접 입력해야 하기 때문에 HTML 태그와 속성을 알고 있어야 하고 입력할 때 오류가 발생하기 쉽습니다.
웹 편집기	웹을 위한 전용 편집기입니다. 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해주어 소스를 읽기 쉽고 편집기에 따라 태그나 속성의 일부만 입력하더라도 전체를 완성해주기 때문에 오타로 인한 오류를 줄일 수 있습니다. 윈도우용 - 노트패드++(무료), 에디트 플러스(유료) 맥용 - 텍스트메이트(무료), 코다(유료) 공용 - 드림위버(유료), 비주얼 스튜디오 코드(무료)
통합개발환경(IDE)	웹 IDE는 웹 편집기의 편리함과 함께 사용자에게 필요한 기발 환경을 한꺼번에 구축하고 사용할 수 있게 해줍니다. 웹 IDE 프로그램에는 비주얼 스튜디오 2015(무료, 유료), 웹스톰(무료), 서브라임 텍스트(무료, 유료) 등이 있습니다.
웹 기반 코드 편집기	웹 상에서 소스 코드를 입력하고 결과를 바로 확인할 수 있는 편집기입니다. 웹 코딩을 위한 시스템 환경을 만들거나 별도의 편집기 프로그램을 이용하지 않고 브라우저 화면에 코드를 입력하고 결과를 볼 수 있는 장점이 있습니다. 팀 작업을 하면서 여러 팀원들과 소스를 공유하는 데도 유용하고 초보자의 코딩 연습용으로도 좋습니다. Codepen(http://codepen.io/)이나 JSFiddle(https://jsfiddle.net/), Liveweave(http://liveweave.com/), Plunker(http://plnkr.co/) 등이 있습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석