HTML5 - 01.개발환경 구성하기, Hello

HTML5 공부를 하기 위한 개발툴이 설치가 완료 되었으면 이제 프로그램의 가장 기본인 Hello 를 보여주기 위한
작업을 하겠습니다.

작업을 하면서 HTML5에서 필요한 설정등을 하도록 하겠습니다.

프로젝트 구성을 시작 하겠습니다.
추후에 계속해서 페이지를 추가 하다보면 나중에 관리하기 힘드니깐 각자 편한 방법으로 해줍니다.

제가 구성한 프로젝트 입니다. 아래 '더 보기'를 클릭하세요.

기본 프로젝트 구성하기

파일 -> 새프로젝트를 실행합니다.

템플릿 -> 기타 프로젝트 형식 -> Visual Studio 솔루션 -> 빈 솔류션을 만들어주세요.
왜 이렇게 해야하는지는 마지막에...

위에 빈 솔루션을 만들면 화면 오른쪽 솔루션 탐색기에 보시면 프로젝트가 생성되었습니다. 프로젝트를 선택하시고
마우스 오른쪽 클릭해서 계속해서 프로젝트를 구성합니다.
추가 -> 새 웹 사이트

Visual C# 선택(제가 C# 개발자여서...;;) -> .NET Framework 4.5 -> ASP.NET 빈 웹 사이트 선택 -> 프로젝트 구성된 경로에 Web 폴더 추가하고 -> 추가한 Web 폴더에 선택

추가한 Web 프로젝트 선택하시고 마우스 오른쪽 클릭
추가 -> 새폴더 -> 폴더 이름을 "Example"

기본 프로젝트 구성이 모두 완료되었습니다. 결과 확인하기

이제 위에서 왜 빈 솔루션을 만들고 했는지 설명드립니다.
프로젝트를 종료를 하고 다시 프로젝트를 불러올때 파일에서 열기 해서 프로젝트 찾고 하는게 귀찮기 때문에
프로젝트.sin 실행으로 프로젝트를 바로 열어볼수있게 만들려고 했습니다.

추가된 폴더 경로에 가시면 sln 파일이 있습니다. 실행하시면 위에서 구성한 프로젝트를 불러올수 있습니다.

Visual Studio 시작페이지에 보면 왼쪽에 프로젝트 바로가기가 있고 고정도 할 수 있지만,
이런 방법도 있다는걸 기록 하고 싶어서 구성하였습니다.

html 페이지를 추가합니다.
추가 -> 새 항목 추가 -> HTML 페이지를 선택합니다.

추가된 HTML.html 페이지에 기본 코드를 작성합니다.

작업하신 html 페이지를 솔루션 탐색기에서 선택하시고 마우스 오른쪽 클릭 -> '브라우저에서 보기'를 선택합니다.
기타 다른 웹 사이트에 보고 싶으시면...

다른 웹사이트로 확인 하고 싶으시다면
작업하신 html 페이지를 솔루션 탐색기에서 선택하시고 마우스 오른쪽 클릭 -> '브라우저 선택'

 

이곳에서 브라우저를 기본값으로 설정하시면 됩니다.

두세번 정도 확인 하신다고 하시면 추가한 페이지에서 오른쪽 클릭하시고 브라우저 선택을 하셔도 가능합니다.

결과를 확인합니다.

참 쉽죠~?