컴퓨터는 잘못이 없다..
[JSP]JSP시작하기2_(+경로공부1)/상대경로,절대경로/(../)의 의미/Context Path/서블릿요청/http://의 의미,톰캣과 웹브라우저가 하는 일 본문
[JSP]JSP시작하기2_(+경로공부1)/상대경로,절대경로/(../)의 의미/Context Path/서블릿요청/http://의 의미,톰캣과 웹브라우저가 하는 일
도토리까꿍v 2021. 1. 2. 18:41[예제코드 프로젝트 구조]
[예제코드]
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<!-- bootstrap css로딩하기 -->
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<h1>나의 웹페이지</h1>
<!-- 상대 경로로 이미지 로딩하기 -->
<img src="images/kim1.png" />
<img src="/Hello/images/kim1.png"/>
<ul>
<!-- 상대 경로 링크(현재 경로를 기준으로 이동) -->
<li><a href="game.html">게임하러가기</a></li>
<!--
절대 경로 링크
/Hello 는 Context path (프로젝트명) 이다.
/Hello/ 는 Hello프로젝트의 WebContent를 가리킨다.
여기서 /Hello/ 는 WebContent를 의미한다.
절대경로링크는 context path를 넣어주면 된다.
보통 절대경로로 쓴다!(혼동의 소지가 없음)
-->
<li><a href="/Hello/game.html">게임하러가기2</a></li>
<!--
만약 hobby폴더에 piano.html파일이 없다면?
404오류가 뜬다.
404오류 - 요청경로에 그 컨텐츠가 존재하지 않을 때 뜨는 오류이다.
-->
<li><a href="hobby/piano.html">피아노 치러가기</a></li>
</ul>
</body>
</html>
game.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>game.html</title>
</head>
<body>
<a href="index.html">인덱스로 돌아가기</a>
</body>
</html>
piano.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/hobby/piano.html</title>
<!-- 절대 경로로 bootstrap css로딩하기 -->
<link rel="stylesheet" href="/Hello/css/bootstrap.css" />
</head>
<body>
<h1>피아노 페이지 입니다.</h1>
<!-- 절대경로 -->
<a href="/Hello/index.html">절대경로로 인덱스로 가기</a>
<!--
상대경로로 적으려면?
../ 는 한 칸 위를 의미한다!
hobby폴더의 한 칸 위 폴더는 WebContent폴더임!
따라서 ../index.html을 하게 되면 WebContent의 index.html을 의미한다.
-->
<a href="../index.html">상대 경로로 인덱스로 가기2</a>
<br />
<!-- 절대 경로로 kim1.png 이미지를 로딩시켜 보세요. -->
<img src="/Hello/images/kim1.png"/>
<!-- 상대 경로로 kim1.png 이미지를 로딩 시켜 보세요. -->
<img src="../images/kim1.png">
</body>
</html>
index.html 실행결과
index.html에서 게임하러가기, 게임하러가기2 클릭 시 이동 화면
index.html에서 피아노 치러가기 클릭 시 이동 화면
[예제코드 설명]
01. 절대경로와 상대경로, Context path, 404오류
┌index.html
▲상대경로는 현재 경로를 기준으로 한 경로이다, 절대 경로는 Context path부터 적어준다.
▲절대 경로에서 /Hello 는 Context path 즉, Project명을 의미한다.
/Hello : Hello프로젝트를 의미
/Hello/ : Hello프로젝트의 WebContent를 의미
02. 404오류가 발생하는 경우
①hobby폴더에 index.html에 없을 때 경로를 아래 그림과 같이 쓰면 어떻게 될까?
②아래 인덱스 보러가기 링크를 클릭했을 때
③404오류가 발생한다.
▲ 주소창에 나온 경로가 진짜 경로이다! (소스코드상 경로말고 항상 주소창의 경로를 확인하자)
hobby폴더에는 index.html파일이 없으므로 404오류가 난다.
④경로를 index.html 에서 /Hello/index.html(절대경로)로 바꾸어 해결가능하다!
(index.html은 실제로 Hello의 WebContent에 들어있다.)
⑤/Hello옆 /는 WebContent를 의미한다. 즉, /Hello/는 Hello 프로젝트의 WebContent를 의미한다.
⑥ ④에서 절대경로로 바꾸어 해결했는데 상대 경로로 바꾸어 해결할 순 없을까?
▲ ../ 는 한 칸 위 폴더를 의미한다! WebContent폴더 안에 hobby폴더가 들어있다.
상대 경로는 현재 경로를 기준으로 하므로 현재경로인 hobby폴더의 한칸 위 폴더 WebContent를 가리키려면 ../ 를 통해 가리키면 된다.
(index.html은 WebContent 폴더에 있음)
03. 톰캣과 웹브라우저가 하는 일
[참고]
http://, file:// 차이점
http:// - 인터넷상의 특정 공간을 가르킴
file:// - 웹브라우저가 존재하는 컴퓨터의 파일시스템을 가르킴
'공부 > JSP' 카테고리의 다른 글
| [JSP]서블릿1_서블릿 만들기(+경로 공부2) (0) | 2021.01.02 |
|---|---|
| [JSP]JSP시작하기(미완성) (0) | 2020.12.28 |
