Notice
Recent Comments
Recent Posts
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Today
Total
관리 메뉴

기록 ＞ 기억

[HTML] 문서 구조 및 배포 방법 본문

IT국비지원

[HTML] 문서 구조 및 배포 방법

BY SON 2021. 8. 13. 12:46

HTML 문서 구조

 

● 웹 프로젝트 폴더구조

 test  (Project명)

 ㄴ src   

     ㄴ  main 

            ㄴ  java 

            ㄴ  webapp  (=ROOT)

                 ㄴ  META-INF 

                 ㄴ  WEB-INF 

                       ㄴ  lib  

                       ㄴ  web.xml  

                 ㄴ index.html  

 

● webapp 밑에 index.html 파일 작성

<!DOCTYPE html> 	<!-- HTML5 로 작성된 웹문서 -->
<html lang="ko">	<!-- 문서에서 사용할 언어는 한국어 -->
	<head>		<!-- 문서 정보를 표시 -->
		<meta charset="UTF-8">	<!-- 인코딩 방식, 모든언어를 표기 할수있는 "UTF-8" -->
		<title>HTML TEST</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 반응형 웹 : 기기의 폭에 맞춰서 사이즈를 조절 -->
	</head>

	<body>		<!-- 브라우저에 실제 표시될 내용 -->
		<font color="blue" size="10">안녕하세요</font>
   		<img src="./imgs/test.jpg" width="612px" height="512px"/>
	</body>
</html>
<font color="blue" size="10">안녕하세요</font>
<태그명 속성명="속성값" 속성명="속성값"></태그명>

 우변에 있는 속성값을 좌변에 넣어라는 의미 (같다라는 의미가 아님)
 속성값은 쌍따옴표, 홑따옴표 둘다 가능
<img src="./imgs/test.jpg" width="612px" height="512px"/>
● 경로설정 방법
 
① 절대경로 : 시스템이나 서버가 지정하고 있는 ROOT부터 시작 (파일명이나 폴더명 앞에 '/' 를 붙임)
<img src="/test/imgs/test.jpg"/> <!-- http://localhost:8888이 ROOT, test 프로젝트의 imgs 폴더 -->

② 상대경로 : 현재 사용중인 파일의 위치가 기준 (생략 또는 './')
<img src="./imgs/test.jpg"/> <!-- 현재 경로 -->
<img src="../imgs/test.jpg"/> <!-- 1단계 상위 경로 -->

 

● index.html 실행 의미

http://localhost:8888/test/index.html

로컬 PC에 설치된 톰캣 8888 포트를 통해 test 프로젝트의 index.html 실행 (webapp 하위에 위치함)

 

 

● 로컬 PC에서 실행한 프로젝트를 모바일로 확인 할 경우

① PC와 모바일은 같은 네트워크에 연결되어야 함

② 같은 네트워크에 연결되어 있는데도 접속이 안된다면 방화벽 풀어주기

 

 

개발 완성된 프로젝트를 배포하는 방법

 

● war, jar, zip 등등의 압축파일 형태로 배포

  • 이클립스에서 프로젝트를 war 파일로 생성
  • 톰캣 서버 관리자 홈페이지(http://localhost:8888)에서 관리자로 로그인
    (이클립스 내부 톰캣을 중지한 후 외부 톰캣 시작, 충돌되면 안되니까)
  • 생성된 war 파일을 deploy
    (배치할 war 파일을 선택 → 배치)

● FTP를 통해 원격 서버에 복사하는 방법으로 배포 (feat. 파일질라)

 

저작자표시 비영리

'IT국비지원' 카테고리의 다른 글

[CSS] 작성법 및 선택자  (0) 2021.08.30
[HTML] <select> 태그 (드롭다운 목록)  (0) 2021.08.27
[HTML] <form> 태그, <input> 태그  (0) 2021.08.26
[HTML] <a> 태그, <map> 태그  (0) 2021.08.25
[HTML] 텍스트 관련 태그  (0) 2021.08.23
요구사항 분석  (0) 2021.08.12
수업 진행 방향 및 개발 환경 구축  (0) 2021.08.11
'IT국비지원' Related Articles more
Comments