[HTML] URL(=URI)

URL(=URI)

• Uniform Resource Identifier
• Uniform Resource Locator
• 웹상의 자원(페이지, 이미지, 영상, 프로그램 등)을 구분하기 위한 고유 주소값
• http://localhost:8090/client/html/ex12_url.html
• http://www.naver.com:80/ (생략하면 80번이 붙은걸로 치자! 다 80번이니까!)
• https://www.naver.com:443/ (https → 443번 생략)
• https://www.google.com:80/

 

URL 주소 분석해서 살펴보기

1. http://, https://

• 프로토콜(=통신 규약)
• Hyper Text Transfer Protocol → 웹 페이지를 주고 받는 통신 규칙
• (https)Security: 보안이 강화된 ver.
• 웹서버와 클라이언트간의 데이터를 주고 받기 위한 약속

 

2. localhost(=127.0.0.1) 자기 자신을 나타내는 값

• http://www.naver.com, http://www.google.com
• 도메인 → DNS → Server IP Address 변환 접속
• 서버측 호스트(컴퓨터)의 주소 (IP주소가 랜카드에 달라붙는 식별자)

 

3. :8090

• :80(80번 포트는 기본 포트라 생략 가능), :443
• 웹서버 포트 번호
• 아파치 톰캣을 찾기 위해서 사용

 

4. /client/html/ex12_url.html

• client → context Root(=webapp 폴더)
• /html/ex12_url.html → 실제 자원의 경로

 

URL 표현 방법

1. 상대 경로
   • 주소의 시작을 '.'으로 한다.
   • '.': 현재 페이지가 존재하는 폴더의 경로
2. 절대 경로
   • 주소의 시작을 '/'으로 한다.
   • '/': 프로젝트의 웹루트 폴더
   • '/client' == webapp 폴더
3. 로컬 경로
   • 드라이브명으로 시작 → 사용 불가능
4. 외부 경로
   • 남의 사이트의 자원 참조
   • http://OOO, https://OOO

 

언제 상대 경로를 사용하고 언제 절대 경로를 사용하는가?
- 상대 경로는 짧지만 다양한 계층구조의 폴더를 이동하며 복사시 계속 경로를 바꿔야 하는 단점.
- 절대 경로는 길지만 복사 시 경로 변경 없이 지속 사용이 가능하다는 장점.
- 프로젝트할때는 절대 경로 사용.
- 각각의 장단점이 뚜렷하기에 골고루 쓰임!!!

 

파일 경로 vs 웹 경로
- 파일 경로: 웹이 아닌 곳은 구분자가 '\'
  ex) C:\\test\\aaa\\test.txt

- 웹 경로: 웹은 구분자가 '/'
  ex) http://test.com/aaa/test.html

 

<h1>페이지 이동하기</h1>

<h2>상대 경로</h2>

<a href="./ex11_link.html">이동하기</a>
<a href="ex11_link.html">이동하기</a> <!-- ./ > 생략 가능 -->

<hr>

<h2>절대 경로</h2>

<a href="/client/html/ex11_link.html">이동하기</a>

<hr>

<h2>로컬 경로</h2>
<!-- 지금은 안 됨! 클릭하면 이동 안 됨!(나만 할 수 있음) > 웹에서 쓸모없는 경로라 현재는 막힌 상태 -->
<a href="C:\class\code\client\ClientTest\src\main\webapp\html\ex11_link.html">이동하기</a>

<hr>

<h2>상대 경로 버전</h2>
<ul>
	<li><a href="./ex12_url.html">12번 예제</a></li>
	<li><a href="./member/member.html">member.html</a></li>
	<li><a href="./admin/admin.html">admin.html</a></li>
	<li><a href="./member/auth/auth.html">auth.html</a></li>
</ul>

<h2>절대 경로 버전</h2>
<ul>
	<li><a href="/client/html/ex12_url.html">12번 예제</a></li>
	<li><a href="/client/html/member/member.html">member.html</a></li>
	<li><a href="/client/html/admin/admin.html">admin.html</a></li>
	<li><a href="/client/html/member/auth/auth.html">auth.html</a></li>
</ul>

 

*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업