[22.10.24] 3일차 [프론트엔드] HTML JSP 웹서버 설치 이클립스 이용

HTML

• HTML : 웹페이지 만드는 언어
  Hyper Text Markup Language
• Markup : 태그
  웹브라우저에 내용을 보여주는 텍스트, 이미지 등의 위치를 표시하는것

JSP

<% %> %안에 jsp 명령 java 명령
"=" 출력하겠다

• html 파일은 웹브라우저에서 실행 가능
• jsp 파일은 웹브라우저에서 실행 불가 [웹서버가 있어야 동작]

1. JDK 자바개발도구
2. 웹서버 설치
   내가 만든 웹문서를 보여주고 싶다 → 서비스하는 프로그램
   웹애플리케이션서버 → JSP파일을 HTML로 변경하는 서비스
   운영체제에 설치

   😺 아파치 톰캣
   https://tomcat.apache.org/
   Tomcat 9 설치
   32-bit/64-bit Windows Service Installer (pgp, sha512) 다운로드
   server Shutdown port : 8005
HTTP/1.1 connector port : 8080

안보이면
C:\Program Files\Apache Software Foundation\Tomcat 9.0\bin
Tomcat9w.exe 실행

• 웹서버 서비스 start
  사용자 웹브라우저 주소 입력 웹 서버내용 볼 수 있음
  http://localhost:8080 → 접속

• 웹서버 서비스 stop
  

stop 클릭

서비스 할 파일 위치 : C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT

http://localhost:8080/파일명

locahost : 내 자신의 주소
cmd창 - ipconfig - IP4주소 확인
localhost 대신 IP 주소 입력

3. 이클립스 설치
   앞서 java용 이클립스 설치 했으나 web용으로 다른 폴더에 재설치해야 함
   c:eclipse 폴더 → 폴더명 변경 eclips_web1
   작업폴더 만들기 D:workspace_web1

⚡ 이클립스 설정

1. 설정 → 한글 UTF-8
   * window - preferences - general - workspace - text file encoding
* web - css files & HTML files & JSP files - encoding - ISO 10646/Unicode(UTF-8)
2. 웹서버 가져오기
   File - New - other - server - server - Apache - Tomcat v9.0 server - tomecat installation directory - Browse.. 버튼 클릭 - C:\Program Files\Apache Software Foundation\Tomcat 9.0
3. 프로젝트 만들기
   File - New - other - web - dynamic web project
   static web project 고정된 웹사이트
   dynamic web project 동적 웹사이트(회원가입 등등)
   project name : webProject
Dynamic web module version : 3.1
Generate web.xml ... check
4. 웹서버, 프로젝트 연결
   화면 아래 servers 탭 - Tomcat v.9.0 - 오른쪽 버튼 add and remove - webProject add 눌리면 서버로 연결

이클립스로 html 만들기

• html 파일 만들기
  src - main - webapp - 오른쪽 버튼 - new - html file - file name : test1.html - html5 - finish

* run as - run on server
ㅁ alway use this server when running this project 체크

Chrome으로 브라우저 변경하기

window - web browser - Chrome

webapp에 폴더 만들기

오른쪽 버튼 - new - folder - html1
test1.html 파일 html1 폴더로 옮기기

* 태그
작은 영역 <span></span> → p, div 태그 사이에 쓴다.
글자 진하게 <b></b> 
진하게 + 강조하기 <strong></strong> 
기울이기 <i></i> <em></em>
윗첨자 <sup></sup>
아래첨자 <sub></sub>
밑줄 <u></u>
삭제(중간줄) <del></del>
인용문(들여쓰기) <blockquote></blockquote>