URL
1. URL
URL(Uniform Resource Locator)이란 웹페이지, 이미지, 동영상과 같은 정보가 위치하는 유니크(식별,고유)한 위치 정보
2. URL의 구성
http://codingeverybody.com/codingeverybody_html_tutorial/url_72/example2.html?mode=view#bookmark
- scheme :어떤 통신 규약을 통해서 데이터를 전송할 것인가...
- hosts: 컴퓨터를 식별하기 위함
- url-path: 식별된 컴퓨터상의 디렉터리와 파일 식별
- query: 그 파일에게 어떠한 정보를 보여준다. 그 파일이 그 정보에 따라서 차등된 다른 정보를 보여줌
- bookmark: 특정한 지점으로 사용자에게 바로 지정해줌
3. 경로(path)
상대경로 : 문서를 기준으로 한 다른 리소스들의 위치정보
절대경로 : 문서의 위치를 가르키는 도메인을 포함한 전체 위치정보
4. 예제
example1.html
<!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>
'WebFont-end > HTML5' 카테고리의 다른 글
| [HTML5] 아이프레임과 프레임 (0) | 2014.12.20 |
|---|---|
| [HTML5] <meta> 태그 (0) | 2014.12.20 |
| [HTML5] 이스케이핑 (0) | 2014.12.20 |
| [HTML5] HTML5 시멘틱 구조 태그 (0) | 2014.12.20 |
| [HTML5] DTD(Doctype) (0) | 2014.12.20 |