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)
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <!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 > </ td > </ tr > </ table > </ body > </ html > |