URL
URL(Uniform Resource Locator)이란 웹페이지, 이미지, 동영상과 같은 정보가 위치하는 유니크한 위치 정보
URL의 구성
http://codingeverybody.com/codingeverybody_html_tutorial/url_72/example2.html?mode=view#bookmark
| 부분 | 명칭 | 설명 |
|---|---|---|
| http:// | scheme | 통신에 사용되는 방식, 프로토콜 |
| codingeverybody.com | hosts | 자원이 위치하고 있는 웹서버의 이름, 도메인이나 IP가 사용된다. |
| /codingeverybody_html_tutorial/url_72/example2.html | url-path | 루트 디렉토리부터 자원이 위치한 장소까지의 디렉토리와 파일명 |
| ?mode=view | query | 웹서버에 넘기는 추가적인 질문 |
| #bookmark | bookmark | 하이퍼링크를 클릭했을 때 특정 위치로 이동하기 위해서 사용 |
경로(path)
- 상대경로 : 문서를 기준으로 한 다른 리소스들의 위치정보
- 절대경로 : 문서의 위치를 가르키는 도메인을 포함한 전체 위치정보
예제
example1.html (github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
img{
height:50px;
width:50px;
}
#structure{
width:379px;
height:124px;
border:1px solid gray;
}
body{
font-size:0.8em;
}
table {
width:100%;
border-collapse: collapse;
}
td, th{
border:1px solid gray;
padding:5px;
}
textarea{
width:100%;
border:none;
}
.div{width:50px}
.ex{width:30px;}
.desc{width:150px}
.result{width:60px}
</style>
</head>
<body>
<p>
exampe1.html 파일이 아래와 같은 디렉토리 구조 위에 위치한다고 간주한다. <br />
<img id="structure" src="structure.gif" />
</p>
<table>
<tr>
<th class="div">구분</th>
<th class="ex">기호</th>
<th class="desc">설명</th>
<th class="code">코드</th>
<th class="result">결과</th>
</tr>
<tr>
<td rowspan="3">상대경로</td>
<td>../</td>
<td>부모 디렉토리</td>
<td>
<textarea><img src="../image/logo.png" /></textarea>
</td>
<td>
<img src="../image/logo.png" />
</td>
</tr>
<tr>
<td>./</td>
<td>현재 디렉토리</td>
<td>
<textarea><img src="./image/logo.png" /></textarea>
</td>
<td>
<img src="./image/logo.png" />
</td>
</tr>
<tr>
<td>없음</td>
<td>현재 디렉토리 기호는 생략할 수 있다</td>
<td>
<textarea><img src="image/logo.png" /></textarea>
</td>
<td>
<img src="image/logo.png" />
</td>
</tr>
<tr>
<td rowspan="2">절대경로</td>
<td>/</td>
<td>루트(root) 디렉토리</td>
<td>
<textarea><img src="/codingeverybody_html_tutorial/url_72/image/logo.png" /></textarea>
</td>
<td>
<img src="/codingeverybody_html_tutorial/url_72/image/logo.png" />
</td>
</tr>
<tr>
<td>URL</td>
<td>URL을 사용</td>
<td>
<textarea><img src="http://codingeverybody.com/codingeverybody_html_tutorial/url_72/image/logo.png" /></textarea>
</td>
<td>
<img src="http://codingeverybody.com/codingeverybody_html_tutorial/url_72/image/logo.png" />
</td>
</tr>
</table>
</body>
</html>
