241202 HTML5 01 - Tomcat 설치, Eclipse 설정, HTML 기초

1. Tomcat 설치

1) 구글에서 Tomcat 검색 -> https://tomcat.apache.org/

2) Download -> Tomcat 11 선택

zip 파일 다운로드

3) 다운로드 받은 zip 파일 압축해제

4) 압축해제한 폴더를 원하는 폴더 곳으로 옮기기

5) Windows 설정 -> 시스템 -> 정보 -> 고급 시스템 설정 -> 환경변수

(1) 시스템 변수 새로 만들기

변수 값 란에는 디렉터리 찾아보기 버튼 클릭 후 톰캣폴더 선택

(2) 시스템 변수 중 Path 편집

  * Path : 실행파일들을 찾을 수 있는 디렉토리들을 저장해둔 것

  * Windows는 cmd에서 값을 입력받으면 먼저 저장해둔 Path들을 순서대로 찾아본다.

새로 만들기 클릭 후 새로운 변수 입력

 

 

 

2. 웹서버 실행

1) startup.bat 실행(cmd 사용)

 

2) 브라우저에 URL입력 창에 localhost:8080 입력

 

 

 

3. 웹서버 종료

1) shutdown.bat 실행

Path에 system32 폴더가 더 상위에 있어서 파일경로 전체를 다 입력

 

2) 브라우저를 새로고침 해보면 연결할 수 없다는 것을 알 수 있음

 

 

 

4. Eclipse에서 Preferences 설정

1) Server

 

 

2) Web Browser

 

 

5. Eclipse에서 프로젝트 만들기

 

 

나머지는 모두 기본값 그대로 놔두고 Finish

 

 

6. 프로젝트에 파일 만들기

파일명 뒤에 확장자(.html)은 생략 가능

생성된 html 파일

 

 

 

7. HTML 파일 실행하기

Finish를 누르면 기본으로 설정한 브라우저가 새로 열리면서 작성한 HTML 파일이 실행된다.

 

 

파일 수정 후 브라우저에서 새로고침하면 수정한 내용이 바로 적용되는 것을 볼 수 있다.

h2로 새로운 텍스트를 입력

새로고침 후 h2로 입력한 내용이 반영된 모습(노란색으로 밑줄 친 부분)

 

8. HTML 기초 설명

 

 

9. HTML 자습 참고 사이트

https://www.w3schools.com/

 

 

 

※ 오류 발생 시 해결방법 (1) : 서버 설정

 

 

※ 오류 발생 시 해결방법 (2) : Dynamic Web Module 버전 확인

  * 버전이 6.0 이하여야 오류가 안 생김!!

 

Dynamic Web Module 버전을 6.0으로 수정하였다.

 

 

※ Tomcat 버전에 따라 Jakarta / Java 가 나눠지기 때문에 버전 선택 시 주의해야 한다.

  * Tomcat 9 이하 버전이 Java, 최근 버전은 Jakarta

 

※ cmd에서 앞부분만 입력하고 탭 누르면 자동완성 됨.

 

※ 브라우저에서 개발자 도구를 실행하는 단축키 : F12