---
title: "XML 편집기는 HTML5 및 CSS3를 지원합니다"
date: "2012-01-03"
tags:
- "css3"
- "html-editor"
- "html5"
- "v2012"
- "xmlspy"
description: Altova의 XMLSpy 2012가 고급 기능, 예를 들어 구문 강조, 코드 자동 완성, 통합 브라우저 보기 등을 통해 HTML5 및 CSS3 편집 기능을 어떻게 향상시키는지 알아보세요.
---
Status: #blog
Tags: #css3 #html-editor #html5 #v2012 #xmlspy
Categories: [Altova](/blog/ko/category/altova.md)
# XML 편집기는 HTML5 및 CSS3를 지원합니다
최근 출시된 2012 버전 업데이트를 통해 Altova MissionKit 웹 도구에 중요한 개선 사항이 적용되었습니다 [발표, 출시, 공개, 석방, 해제](https://www.altova.com/ko/whatsnew.html): HTML5 및 CSS3를 지원합니다. 코드 편집 기능이 있는 XMLSpy 2012 (및 이후 버전)과 그래픽 스타일시트 및 보고서 디자인 기능을 제공하는 StyleVision 2012에서, 최신 웹 표준 버전을 지원하도록 업데이트되었습니다.
[](http://lh4.ggpht.com/-jax0JUfDpzg/TwIafF8lrYI/AAAAAAAAAHM/eN08gQzWlbE/s1600-h/clip_image001%25255B3%25255D.png)
여기서는 XMLSpy의 HTML5 및 CSS3 편집 기능에 대해 집중적으로 설명하겠습니다. StyleVision 기능은 추후에 별도의 기사에서 다루도록 하겠습니다.
### HTML5 편집기
XMLSpy는 오랫동안 다음 기능을 지원해 왔습니다 [HTML4 코드 편집](https://www.altova.com/ko/xmlspy/html-editor.html) 그리고 물론, XHTML도 마찬가지이며, 이제 이러한 지능적인 코딩 기능은 다음으로 확장되었습니다 [HTML5 (HTML 5)](https://www.altova.com/ko/xmlspy/html-editor.html).
XMLSpy를 이미 사용하고 계신다면, HTML5 파일을 편집 모드로 열었을 때 고급 텍스트 보기에서 제공되는 유용한 구문 강조, 코드 접기 기능, 그리고 줄 번호 기능을 바로 알아차리실 수 있습니다. 코드를 입력하는 동안, 드롭다운 메뉴와 정적 입력 도우미 창을 통해 유효한 HTML5 요소 및 속성 옵션이 제공되므로, 사용자가 선호하는 방식으로 코드를 완성할 수 있습니다. 동시에, 코드 자동 완성 기능은 요소가 올바르게 닫히도록 하면서 작업 속도를 높여줍니다.
[](http://lh6.ggpht.com/-RgxgBoIMhPw/TwIafmCNstI/AAAAAAAAAHc/D2LIQP-TWZQ/s1600-h/clip_image002%25255B3%25255D.png)
이러한 지능형 편집 기능은 사용하고 계신 HTML 버전에 적용됩니다. 기존 HTML5 문서를 열거나 새 파일을 처음부터 만들 때, 모든 HTML5 요소와 속성이 즉시 편집 도우미 창과 드롭다운 메뉴에서 사용 가능합니다.
XMLSpy에는 통합된 브라우저 보기 기능이 내장되어 있어, HTML5 코딩 결과를 즉시 확인할 수 있습니다. 브라우저 보기 기능은 XMLSpy 내에서 인터넷 익스플로러를 사용하여 페이지를 렌더링합니다
[](http://lh6.ggpht.com/-0kNO6Tl3YHY/TwIagG5XUSI/AAAAAAAAAHs/6IE-jNjr_08/s1600-h/clip_image004%25255B3%25255D.jpg)
...뿐만 아니라, 설치된 모든 브라우저에서 여러분의 [HTML5 웹 페이지](https://www.altova.com/ko/xmlspy/html-editor.html)를 즉시 확인할 수 있도록 지원합니다.
[](http://lh5.ggpht.com/-VSwezP3iNvI/TwIag7aPseI/AAAAAAAAAH8/k2ZG_FSh_EE/s1600-h/clip_image005%25255B3%25255D.gif)
이를 통해 빠른 테스트와 디버깅이 가능하며, 다양한 웹 브라우저에서의 호환성을 보장할 수 있습니다.
새로운 HTML5 기능들이 실제로 어떻게 작동하는지 확인하려면, XMLSpy 2012의 "Examples" 폴더에 포함되어 있으며 "Example" 프로젝트에서 연결되어 있는 간단한 HTML5 예제 문서를 살펴보세요. HTML에 대해 더 자세히 알고 싶다면, 웹 상에 많은 유용한 자료들이 있으며, 그중 하나는 [http://www.w3.org/TR/html5/](http://www.w3.org/TR/html5/)입니다.
### CSS3 편집기
... (기관/단체/사람 등)과 긴밀하게 협력하여 [HTML5 편집기](https://www.altova.com/ko/xmlspy/html-editor.html) XMLSpy는 다음과 같습니다 [CSS3 편집기](https://www.altova.com/ko/xmlspy/css-editor.html), 또한, 이 기능은 텍스트 보기에서 구문 강조 표시 및 입력 지원 기능을 제공하며, 북마크 기능과 코드 접기 기능도 제공합니다.
[](http://lh6.ggpht.com/-3bE7my-XCNQ/TwIahUxeFzI/AAAAAAAAAIM/d9Dg6iF9sBk/s1600-h/clip_image006%25255B3%25255D.png)
CSS 개요 창은 문서의 선택자를 그룹별로 정리하여 문서의 개요를 보여줍니다. 각 그룹은 접고 펼 수 있으며, CSS 개요 창에서 선택자를 클릭하면 해당 선택자가 문서 내에서 강조 표시됩니다. CSS 속성 및 HTML 요소에 대한 도움말은 창 형태로 표시되며, 상황에 맞는 드롭다운 메뉴도 제공됩니다. 또한, XMLSpy는 사용자가 속성 이름을 입력하는 동안 각 속성과 그 가능한 값에 대한 설명을 제공하는 툴팁도 제공합니다.
[](http://lh4.ggpht.com/-zNowLSk-LPM/TwIahhG7U1I/AAAAAAAAAIc/CTRfLtZ7D7Y/s1600-h/clip_image007%25255B3%25255D.png)
여기서는 XMLSpy에 내장된 브라우저 기능을 활용하여, 수정하신 [CSS](https://www.altova.com/ko/xmlspy/css-editor.html)의 결과를 연결된 HTML 페이지에서 즉시 확인할 수 있습니다.
[](http://lh5.ggpht.com/-BWRgsCJ-TCo/TwIaiLS6kRI/AAAAAAAAAIs/yDO9PQ9OFWY/s1600-h/clip_image008%25255B3%25255D.png)
### HTML 작업에 XMLSpy를 사용하는 이유는 무엇인가요?
네, XMLSpy는 XML 관련 기능으로 잘 알려져 있지만, HTML 개발에도 훌륭한 선택입니다. XMLSpy에서 HTML5 및 CSS3 편집은 XML, XSLT, WSDL 등 관련 기술 지원, 통합 프로젝트 관리 기능, 인기 버전/소스 관리 시스템 지원, 그리고 Microsoft® SharePoint® Server와의 통합을 통해 이루어지므로, 차세대 웹사이트 및 애플리케이션 개발에 필요한 모든 도구를 제공합니다.
현재 HTML5를 어떻게 활용하고 계신지 알려주시면 감사하겠습니다. 아래 댓글을 통해 의견을 남겨주세요.