이클립스에서 개발환경을 구축하는 방법은 다음과 같다.
Eclipse 의 최신 버전인 Juno를 기준으로 설명하면 다음과 같다.
기본적인 환경 구축하기
1.먼저 Eclipse를 시작하고 Help > Install New software 를 실행한다.
2. 아래와 같은 화면이 뜨는데 여기서 Work with 부분에 다음을 입력한다.
http://download.eclipse.org/releases/juno
3. 아래와 같이 스크롤바를 맨 아래로 내려서 Web, XML, Java EE and OSGi Enterprise Development를 선택한다.
4. Next를 눌러서 설치를 진행한다.
5. 설치가 끝나고 나면 Eclipse를 다시 시작한다.
6. 설치가 끝났으면 Encoding 방식을 바꿔주기 위해서 Windows > Preferences를 실행하고 아래와 같이 Encoding 방식을 아래 그림과 같이 ISO 10646/Unicode(UTF-8)로 설정한다.
7. OK를 눌러 저장하고 나온다. 이렇게 하면 기본적인 개발환경 구축은 완료된다.
새로운 프로젝트 만들어보기
그러면 이제 새로운 프로젝트를 만들어 보자
1. Menu의 File > New > Project를 실행하고 아래와 같이 Project를 선택하고 Next > 를 누른다.
2. Project 이름은 적당한 이름을 지정한다. 여기서는 HelloHTML5로 하고 Finish를 누른다.
3. 2번까지 완료하고 나면 eclipse 왼쪽의 Package Explorer에는 HelloHTML5라는 프로젝트가 생긴다. 여기서 프로젝트를 선택하고 마우스 오른쪽버튼을 눌러 New >Other 를 선택하면 다음과 같은 화면이 실행된다.
4. 여기서 Next > 버튼을 누르고 아래와 같은 화면에서 새로 생성할 화일이름을 입력한다. 여기서는 start.html로 한다.
5. 여기서 다시한번 Next를 누르고 아래와 같이 New HTML File (5) 를 선택한다.
6. Finish 버튼을 누르면 프로젝트 아래에 파일이 생성되어 있는 것을 확인할 수 있다. 파일을 열어보면 자동으로 코드가 생성되어 있는 것을 확인할 수 있는데, 여기서 간단하게 browser에서 실행되는 것을 테스트 하기 위해 아래 처럼 <body> 와 </body> 사이에 Hello, HTML 5를 입력해보자
7. 저장을 하고 start.html을 선택한 다음 마우스 오른쪽 키를 눌러 메뉴에서 Open With > Web Browser를 실행을 한다.
8. Eclipse의 Browser가 실행되면서 다음과 같은 결과 화면을 볼 수가 있다.
9. HTML5의 경우 Browser에 따라서 특성을 타기 때문에 다음과 같이 설정해 외부 브라우저를 사용할 수 있다.
Window > Preferences > General > Web Browser
