Visual Studio 에서 HTML5 템플릿 만들기

Posted in 모바일/HTML5 // Posted at 2010. 9. 28. 15:20
728x90
간혹 글을 쓰다 보면 카테고리를 어디에 둘지 애매할 때가 있다. 이 글이 그러하다.
이 글에서 소개하는 내용은, 마이크로스프트의 닷넷 개발툴인 Visual Studio 2010 환경에서 HTML5 개발을 편하게 하기 위한 템플릿을 제작하는 것이다

원문글의 필자와 나처럼 Visual Studio를 주로 사용하는 개발자에게는 도움이 되나 그렇지 않은 개발자에게는 도움이 되지 않을 수도 있다. 이 글은 HTML5 자체가 아니라 Visual Studio를 다루는 내용에 가깝기 때문이다. 그래서 HTML5 카테고리에 은근슬쩍 집어 넣기가 살짝 꺼려진다.
(그렇다고 이 글을 위해 VisualStudio 카테고리를 만들 수는 없지 않나)

하지만 HTML5 의 기본 문서 구조나 템플릿 구조를 포함하고 있기에 HTML5와 완전히 동떨어져 있다고만 할 수는 없다. 결국 이 글은 이 블로그의 HTML5 카테고리만큼 어울리는데도 없다는 결론이다 ㅎㅎ

원문글> How to Create HTML5 Website and Page Templates for Visual Studio 2010

제목 그대로 Visual Studio 2010 에서 HTML5 에 관한 웹사이트 템플릿과 페이지 템플릿을 만드는 방법을 소개하는 글이다. 글을 보면 알겠지만, 템플릿을 만들고 VS2010 적용하는 것 자체는 매우 간단하기때문에 쉽게 적용해 볼 수 있다.

개인적으로 이 글에서 강조하고 싶은 것은 VS2010 템플릿 제작방법이 아니라,
필자가 템플릿을 제작한 동기와 권장되는 HTML5 템플리 구조 그리고 HTML5 프로젝트의 기본 코드 구성을 강조하고 싶다

우선 필자는 VS2010 을 자주 다루는 MS 직원으로써 현재 HTML5와 JavaScript 에 꽂혀 있다고 한다
(음... 이 점은 현재의 나와 매우 유사하다고 볼 수 있다 ㅎ)

그러다보니 자연스레 VS에서 쉽게 HTML5 프로젝트를 생성하고 싶었고 그러던 찰나에
blog post by Zander Martineau 를 보고 영감을 얻어 VS용 HTML5 템플릿을 만들기로 했단다
(음.. 이 점은 나보다 낫다. 난 뭐냐.. 이런 영감도 없다뉘...)

재미있는것은 blog post by Zander Martineau 글의 필자도 HTML5 Boilerplate 로부터 코드를 참조했다고 한다. 꼬리에 꼬리를 무는 형태의 글이다. 하나의 글을 통해 세개의 유용한 정보를 취득한 셈이다

그리고 HTML 기본 코드 구성에 대해 잠시 살펴보면,
HTML5 문서임을 정의하는<!doctype html> 으로 출발하여 기본적인 meta 태그들 그리고 기본으로 깔고 있는 스타일 정의를 포함하고 있다. 또한 jQuery 라이브러리 추가를 위한 Google, MS 의 CDN 스크립트 정의, HTML5 지원여부를 판별하기 위한 Modernizr 라이브러리 정의 역시 포함하고 있다.
또한 (간혹 욕은 듣고 있지만) 여전히 HTML5 브라우저 호환성의 주요한 대안인 구글 크롬 프레임 적용을 위한 코드도 포함되어 있다

블로그 관련글: Modernizr 라이브러리  ,
  JQuery 사용 환경 설정

이러한 코드을 통해 HTML5문서가 갖추어야 할 기본적인 구성과 참조항목을 알 수 있다는 것이 주요하다. 결론적으로 VS 를 다루는 개발자들에게는 쉽게 HTML5 프로젝트를 생성하는 법을 알려 주는 유용한 정보이며 그렇지 않은 개발자들에게는 HTML5의 기본적인 코드 구성을 알려 주는 유용한 정보인 것이다