💻설치 및 html 파일 만들어보기(22.10.24 웹수업)

리안🤍·2022년 12월 5일

web

웹공부기록

목록 보기

1/4

📌 웹 기본

HTML - 화면 틀(웹 사이트 구조)
CSS - 화면 꾸미기(웹 사이트 디자인)
Javascript(jQuery) - 화면 제어(웹 사이트 동작)

웹브라우저 : HTML, CSS, Javascript 실행하는 도구
웹편집기(에디터) : 메모장, 노트패드++, 비주얼 스튜디오 코드,
이클립스,...

웹표준 : 전 세계 표준
https://www.w3.org/
https://www.w3schools.com/

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

- 메모장에서 웹서버 만들어보기

 -> test1
<html>
<head>
<title>html title</title>
</head>
<body>
html <br>
body
</body>
</html>

-> test2
<html>
<head>
<title>html title2</title>
</head>
<body>
<h1>제목1</h1>
<p>
html<br> body2
</p>
<p>
html<br> body3
</p>
<div>
html div1
</div>
<div>
html div2
</div>
</body>
</html>

->html 파일로 저장하기

웹서버 설치
- 메모장 열기

-> test3
<html>
<head>
<title>jsp title</title>
</head>
<body>
<%="jsp body" %>
<%=10+20 %>
</body>
</html>

-> test3.jsp로 저장하기
-> jso 동작 안된다

JDK(자바개발도구) 설치
웹서버 설치
-> (내가 만든 웹문서를 보여주고 싶다=> 서비스하는 프로그램)
웹애플리케이션 서버
=> JSP파일을 HTML로 변경하는 서비스=> 웹브라우저 실행

* 아파치 톰캣
https://tomcat.apache.org/
-> 9버전
-> 32-bit/64-bit Windows Service Installer (pgp, sha512) 다운
-> server shut down port - 8005
-> HTTP/1.1 Connector Port - 8080
C:\Program Files\Apache Software Foundation\Tomcat 9.0

* 웹서버 서비스 start

사용자 웹브라우저 주소 입력 웹서버 내용 볼 수 있음

http://localhost:8080
http://localhost:8080/index.jsp
http://localhost:8080/test1.html
http://localhost:8080/test2.html
http://localhost:8080/test3.jsp
localhost = 내 자신의 서버

아이콘 안 보일 경우

C:\Program Files\Apache Software Foundation\Tomcat 9.0\bin에서 tomcat9w클릭)

* 웹서버 서비스 stop
아이콘 클릭 후 스탑 누르기

* 서비스 할 파일 위치
C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT
밑에 이전에 만든 test1,2,3 파일 넣기
-> 홈페이지 열어보기

*내 ip주소 확인하기
실행
cmd
ipconfig
IPv4 주소 . . . . . . . . . : 192.168.219.107

* 방화벽 해제
Windows Defender 방화벽
Windows Defender 방화벽 설정 또는 해제
Windows Defender 방화벽 사용 안함

http://192.168.219.107:8080/test3.jsp

-> 다 하고 난 후 웹서버 서비스 stop 하기

이클립스 설치
- C: 에서 eclipse-jee-2022-09-R-win32-x86_64 압축 알아서 풀기
- eclipse_web1로 이름 바꾸기
- 보내기 -> 바탕화면에 바로가기 만들기(eclipse - web1)
작업폴더 만들기
- D:에 만들기(workspace_web1)
- 이클립스 실행 - D:\workspace_web1 폴더 선택 후 launch

(1)설정=> 한글 UTF-8
window - Preferences
General - Workspace - Text file encoding
Other - UTF-8
Web - CSS Files - Encoding
ISO 10646/Unicode(UTF-8) 선택
Web - HTML Files - Encoding
ISO 10646/Unicode(UTF-8) 선택
Web - JSP Files - Encoding
ISO 10646/Unicode(UTF-8) 선택

(2)웹서버 가져오기
File - New - Other - server - server -> next
Apache - Tomcat 9.0 -> next
(Tomcat installation directory) - browser 버튼 클릭
- C:\Program Files\Apache Software Foundation\Tomcat 9.0 선택 -> next
->finish

(3) 프로젝트 만들기
File - New - Other - Web - Dynamaic Web Project 선택
project name : webProject
Dynamaic Web module version = 3.1 - > next - > web.xml 체크

- static web project(보여주기식 홈페이지- 회원가입안됨)

(4) 웹서버, 프로젝트 연결
화면 아래에 Servers 탭
Tomcat 9.0 - 오른쪽 버튼 눌러서 Add and Remove 선택
webProject 선택해서 Add하기 - > finish

=> 이클립스 설정 끝!

html 파일 만들기
webProject - src - main - webapp오른쪽버튼 - new - HTML파일
파일네임 : test1.html - > next
HTML(5) 그대로하고 finish - > HTML 틀이 만들어짐

- [!DOCTYPE html] 은 html의 5버전을 나타냄
- [meta charset="UTF-8"] 은 html 한글을 나타냄

webapp에 - new - 폴더 만들기 이름은 html1

📌 만들어보기

* 명령어
<h></h> = >제목
<p></p> = 문단 묶기
<div></div> = 영역표시
<b></b> = 진하게
<strong></strong> = 강조
<br> = 줄바꾸기
<i></i>= 기울이기
<em></em> = 기울어지면서 강조
<sup></sup> = 위 첨자
<sub></sub> = 아래 첨자
<u></u> = 밑줄
<del></del> = 삭제(가운데 줄)
<blockquote></blockquote> = 인용문

[test1]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>html 제목</title>
	</head>
	<body>
	<h1>제목1</h1>
	<p>
	html<br> 
	본문
	</p>
	<div>영역<span>작은 영역</span>표시1</div>
	<div>영역표시2</div>
	</body>
	</html>

✍️작성

🖥️결과물

[test2]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	</head>
	<body>
	<h1>레드향</h1>
	<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
	<p>레드향은 <i>한라봉</i>과 귤을 교배한 것으로 일반 귤<sup>보다</sup> 2~3<sub>배</sub> 크고, <br>
	과육이 <em>붉고 통통</em>하다.</p>
	<p> 비타민 C와 비타민 P가 풍부해 <strong>혈액순환</strong>, <br>
	<u>감기예방</u>등에 좋은 것으로 <del>알려져 있다</del>.</p>
	<blockquote>
	"인용문<br>
	내용"
	</blockquote>
	</body>
	</html>

✍️작성

🖥️결과물

[ex1]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>html/ex1.html</title>
	</head>
	<body>
	<h1>탐라국 입춘굿</h1>
	<p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 <br>
	제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.</p>
	<p>제주에서 입춘은 새철 드는 날.<br>
	신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.</p>
	<p>자세한 정보 보기</p>
	<h2>일정</h2>
	<h2>먹거리</h2>
	</body>
	</html>

✍️작성

🖥️결과물

리안🤍

CRUSH ON

다음 포스트

💻설치 및 html 파일 만들어보기(22.10.24 웹수업)

웹공부기록

📌 웹 기본

📌 만들어보기

[test1]

[test2]

[ex1]

💻웹 문서에 목록/표 만들기(22.10.25 웹수업)

0개의 댓글