HTML 편집기

HTML editor
HTML
비교

HTML 편집기는 웹 페이지의 마크업인 HTML을 편집하기 위한 프로그램이다.웹 페이지의 HTML 마크업은 어떤 텍스트 편집기로도 제어할 수 있지만, 전문 HTML 편집기는 편리함과 추가된 기능을 제공할 수 있다.예를 들어, 많은 HTML 편집자는 HTML뿐만 아니라 CSS, XML 및 자바스크립트 또는 ECMAScript와 같은 관련 기술도 취급한다.경우에 따라서는 FTP와 WebDAV를 통한 원격 웹 서버와의 통신, Subversion이나 Git와 같은 버전 제어 시스템과의 통신도 관리한다.마이크로소프트 워드나 쿼크 XPres와 같이 웹 디자인에만 전념하지 않는 많은 워드 프로세싱, 그래픽 디자인, 페이지 레이아웃 프로그램도 HTML 에디터로서 기능할 수 있는 능력을 가지고 있다.

편집기 유형

HTML 편집기에는 텍스트 편집기와 WYSIWYG 편집기의 두 가지 주요 종류가 있다.

텍스트 편집기

HTML과 함께 사용하도록 고안된 텍스트 편집기는 일반적으로 최소한 구문 강조 표시를 제공한다.일부 편집자는 공통 HTML 요소와 구조를 신속하게 삽입하기 위해 템플릿, 도구 모음 및 키보드 단축키를 추가로 특징으로 한다.마법사, 툴팁 프롬프트 및 자동 완성은 일반적인 작업에 도움이 될 수 있다.

HTML에 일반적으로 사용되는 텍스트 편집기는 일반적으로 버전 제어, 링크 확인 및 검증, 코드 정리 및 포맷, 철자 검사, FTP 또는 WebDAV에 의한 업로드, 프로젝트로서의 구조화 등의 작업을 위한 내장 기능 또는 외부 도구와의 통합을 포함한다.링크 확인이나 검증과 같은 일부 기능은 네트워크 연결이 필요한 온라인 도구를 사용할 수 있다.

텍스트 편집기는 설계자가 사용하고자 하는 CSS, JavaScript 및 서버측 스크립팅 언어와 같은 HTML 및 기타 웹 기술에 대한 사용자 이해를 요구한다.

이러한 요구 사항을 완화하기 위해 일부 편집자는 단순한 색상 강조보다는 시각적으로 더 조직화된 모드에서 마크업을 편집할 수 있도록 허용하지만 WYSIWYG는 고려하지 않는다.이러한 편집기에는 일반적으로 팔레트 창 또는 대화상자를 사용하여 선택한 객체의 텍스트 기반 매개변수를 편집하는 옵션이 포함된다.이러한 팔레트는 개별 필드에서 매개변수를 편집하거나 화면 양식을 작성하여 새 태그를 삽입할 수 있으며, 매개변수 편집(이미지 또는 텍스트 스타일 미리보기 등) 시 추가 위젯을 제공하고 선택할 수 있으며, HTML 객체 및 속성을 확장 및 축소할 수 있는 개요 편집기를 포함할 수 있다.

WYSIWYG HTML 편집기

Amaya 10 HTML 편집기

WYSIWYG HTML 편집기는 웹 브라우저에서 페이지가 표시되는 방식과 유사한 편집 인터페이스를 제공한다.WYSIWYG 편집기를 사용하는 것은 HTML 지식이 필요하지 않을 수 있기 때문에, 그것들은 종종 경험이 부족한 컴퓨터 사용자들이 시작하기 더 쉽다.

WYSIWYG 뷰는 레이아웃 엔진을 내장함으로써 달성된다.이것은 사용자 정의로 작성되거나 웹 브라우저에서 사용되는 것에 기초할 수 있다.목표는 항상 편집하는 동안 렌더링된 결과는 일반적인 웹 브라우저에서 나중에 볼 수 있는 것을 나타내야 한다는 것이다.

WYSIWIM(WYSIWYM)은 WYSIWYG 편집자의 대안적 패러다임이다.문서의 형식이나 표시에 초점을 맞추는 대신 각 요소의 의도된 의미를 보존한다.예를 들어 페이지 머리글, 섹션, 단락 등은 편집 프로그램에서와 같은 레이블로 표시되며 브라우저에 적절하게 표시된다.

WYSIWYG 달성 어려움

주어진 HTML 문서는 다음과 같은 몇 가지 이유로 다양한 플랫폼과 컴퓨터에 일관성이 없는 모습을 나타낼 것이다.

브라우저와 애플리케이션이 다르면 동일한 마크업이 다르게 나타날 것이다.
같은 페이지는 고해상도 화면에서 크롬, 사파리, 엣지, Internet Explorer, 파이어폭스 등에서 약간 다르게 표시될 수 있지만, 완벽하게 유효한 텍스트 전용 Lynx 브라우저에서는 매우 다르게 보일 것이다.그것은 PDA, 인터넷이 가능한 텔레비전과 휴대폰에서 다시 다르게 렌더링될 필요가 있다.음성이나 점자 브라우저에서의 사용적합성, 또는 기존의 브라우저로 작업하는 화면 판독기를 통해 기본 HTML의 완전히 다른[clarification needed] 측면에 대한 요구를 할 것이다. 작가가 할 수 있는 일은 외모를 제안하는 것뿐이다.
모든 컴퓨터 소프트웨어와 마찬가지로 웹 브라우저에도 버그가 있다.
그들은 현재의 표준에 부합하지 않을 수도 있다.모든 공통 브라우저의 현재 버그를 중심으로 웹 페이지를 디자인하려고 하는 것은 절망적이다: 각 브라우저의 새로운 버전이 나올 때마다 월드 와이드 웹의 상당 부분이 새로운 버그와 새로운 수정 사항에 맞게 다시 코딩해야 할 것이다.일반적으로 표준에 따라 설계하는 것이 훨씬 현명하다고 여겨지며, '가장자리' 기능이 정착될 때까지 멀리 떨어져 있다가 브라우저 개발자들이 다른 방식으로 페이지를 따라잡기 보다는 당신의 페이지를 따라잡기를 기다리는 것이다.[1]예를 들어, 비록 많은 WYSIWYG와 다른 편집자들이 아직 완전히 따라잡지 못했더라도,[2] 현재 모든 주요 기능에 대해 공통 브라우저에서 광범위한 지원을 이용할 수 있기 때문에 아무도 CSS가 여전히 '절벽'이라고 주장할 수 없다.[3]
하나의 시각적 스타일은 여러 의미적 의미를 나타낼 수 있다.
HTML 문서의 기본 구조에서 파생된 의미적 의미는 검색 엔진과 다양한 접근성 도구에도 중요하다.종이에 우리는 문맥과 경험으로 볼 때 굵은 글자가 제목인지 강조인지 아니면 다른 것을 나타내는지를 알 수 있다.그러나 WYSIWYG 편집기에서 이러한 구별을 전달하는 것은 매우 어렵다.단순히 WYSIWYG 편집기에서 텍스트 조각을 굵게 만드는 것만으로는 독자들에게 텍스트가 굵다는 것을 의미론적으로 나타내는 것이 무엇인지 *왜*인지*를 말하기에는 충분하지 않다.
현대의 웹 사이트는 WYSIWYG를 유용하게 만드는 방식으로 구성되는 경우가 드물다.
현대의 웹 사이트는 일반적으로 컨텐츠 관리 시스템이나 데이터베이스에 저장된 컨텐츠를 사용하여 페이지를 즉시 구성할 수 있는 다른 템플릿 프로세서 기반 수단을 사용한다.개별 페이지는 WYSIWYG 편집기에서 설계 및 편집될 수 있기 때문에 파일 시스템에 저장되지 않으므로, 어떤 형태의 추상화된 템플릿 기반 레이아웃은 불가피하며, WYSIWYG 편집기를 사용하는 주요 이점 중 하나가 무효화된다.

유효한 HTML 마크업

HTML은 구조화된 마크업 언어다.월드 와이드 웹의 W3C 표준에 부합하려면 HTML이 어떻게 작성되어야 하는지에 대한 일정한 규칙이 있다.이러한 규칙을 따르면, 웹 사이트는 제한된 대역폭과 화면 크기로 모든 종류의 컴퓨터, 신체 건강한 사람과 장애인에게 접근할 수 있으며 휴대 전화와 PDA와 같은 무선 장치에서도 액세스할 수 있다.그러나 웹상의 대부분의 HTML 문서는 W3C 표준의 요건을 충족하지 못한다.2011년에 가장 인기 있는 350개의 웹사이트를 대상으로 한 연구에서 94%의 웹사이트가 웹 표준 마크업과 스타일시트 검증 테스트에 실패하거나 문자 인코딩을 부적절하게 적용했다.심지어 구문적으로 정확한 문서도 불필요한 반복 사용으로 인해, 또는 몇 년 동안 사용되지 않았던 규칙에 근거하여 비효율적일 수 있다.HTML과 함께 CSS를 사용하는 것에 대한 현재의 W3C 권고안은[4] 1996년에 W3C에 의해 처음으로 공식화되었고 그 이후로 개정되고 정비되었다.[5][6]

이 지침은 콘텐츠(HTML 또는 XHTML)와 스타일(CSS)의 분리를 강조한다.이는 각 HTML 요소는 고사하고 각 페이지에서 반복되지 않고 전체 사이트에 대해 스타일 정보를 한 번 전달할 수 있는 장점이 있다.WYSIWYG 편집자 디자이너들은 그 이후로 이러한 개념들을 사용자들에게 어떻게 하면 근본적인 현실을 노출시킴으로써 그것들을 혼란스럽게 하지 않고 가장 잘 제시할 수 있는지에 대해 고심해 왔다.현대의 WYSIWYG 편집자들은 모두 어느 정도 이것에 성공하지만, 완전히 성공한 편집자는 없다.

그러나 웹 페이지는 WYSIWYG 또는 손으로 작성되거나 편집되었으며, 가능한 한 많은 독자와 시청자들 사이에서 성공을 거두기 위해서 뿐만 아니라, 웹 자체의 '세계적인' 가치를 유지하기 위해서, 무엇보다도 먼저 유효한 마크업과 코드로 구성되어야 한다.[7]무료 W3C Validator 서비스(W3C HTML Validator 및 W3C CSS Validator) 또는 기타 신뢰할 수 있는 대안을 사용하여 HTML 및 CSS 구문이 성공적으로 검증될 때까지는 월드 와이드 웹에 대한 준비로 간주되지 않아야 한다.[7]

신체, 시력 또는 기타 장애를 가진 사람들에 의한 웹페이지의 접근성은 현대 사회에서 웹의 편재성과 중요성을 고려할 때 좋은 아이디어일 뿐만 아니라 법에 의해 요구되기도 한다.미국, 미국 장애인법, 영국에서는 공적 자금 지원 기관에서 운영하는 웹사이트에 장애 차별법을 의무화하고 있다.다른 많은 나라에서도 비슷한 법이 이미 존재하거나 곧 있을 것이다.[7]페이지를 접근 가능하도록 만드는 것은 단순히 페이지를 유효하게 만드는 것보다 더 복잡하다; 그것은 전제조건이지만 고려해야 할 다른 많은 요소들이 있다.[8]WYSIWYG 도구를 사용하든 안하든 좋은 웹 설계는 이것들도 고려해야 한다.

웹 페이지를 설계, 작성, 유지 관리하는 데 사용되는 소프트웨어 도구가 무엇이든, 기본 HTML의 품질은 페이지에서 일하는 사람의 기술에 달려 있다.HTML, CSS 및 기타 스크립팅 언어에 대한 일부 지식뿐만 아니라 이러한 영역에서 현재 W3C 권장사항에 대한 친숙함은 WYSIWYG HTML 편집기를 사용하거나 사용하지 않고도 모든 설계자가 더 나은 웹 페이지를 제작하는 데 도움이 될 것이다.[9]

참고 항목

참조

  1. ^ "An essay on W3C's design principles". W3.org. Retrieved 23 October 2013.
  2. ^ "Cascading Style Sheets". W3.org. Retrieved 23 October 2013.
  3. ^ "Cascading Style Sheets". W3.org. Retrieved 23 October 2013.
  4. ^ "Cascading Style Sheets, level 1". W3.org. Retrieved 23 October 2013.
  5. ^ http://www.w3.org/TR/CSS21/ W3C의 현재 CSS 권장 사항
  6. ^ http://www.w3.org/TR/xhtml11/ W3C의 현재 HTML 권장 사항
  7. ^ a b c Harold, Elliotte Rusty (2008). Refactoring HTML. Boston: Addison Wesley. ISBN 978-0-321-50363-3.
  8. ^ "Web Content Accessibility Guidelines (WCAG) 2.0". W3.org. 2008. Retrieved 23 October 2013.
  9. ^ "Dave Raggett's Introduction to HTML". W3.org. 24 May 2005. Retrieved 23 October 2013.