HTML과 URLs

velog 블로그에서 tistory로 이전한 데이터 입니다. 2020-09-30

1. 도입

github에서 AXIOS의 Relative URLs 관련해서 issue 이야기를 나누다가 한번 정리할 필요가 있다고 생각이 들었습니다.

W3에 나온 5 HTML and URLs를 참고해서 적어보게 되었습니다.

5.1 Uniform Resource Locators(URLs)

대부분의 리소스들(HTML, 이미지, 비디오, 프로그램 등)이 URL 형식에 따라 경로를 가집니다.

URLs는 일반적으로 3가지로 구성됩니다.

1. 리소스에 액세스하는 데 사용되는 프로토콜을 식별하는 체계입니다.
2. 리소스를 호스팅하는 컴퓨터의 이름입니다.
3. 경로로 제공된 리소스 자체의 이름입니다.

예시)
http://www.w3.org/TR/WD-html4/cover.html

이 URL은 다음과 같이 읽을 수 있습니다.
www.w3.org 에 있는 /TR/WD-html4/cover.html 파일을 전달합니다.

URL은 항상 경우에 민감하기 때문에 고려해서 작성해야 됩니다.

경로를 아무렇게 주게 되면 일관성도 떨어져 어떤작업을 하는지 불분명할 수 있기 때문인것 같네요.

5.1.1 Fragment identifiers

url은 자원의 위치를 나타낼 수 있습니다.
url 끝에다가 '#' + element ID를 붙이면 해당 아이디를 가진 부분으로 이동합니다.

예시)
http://somesite.com/html/top.html#section_2
section_2의 이름을 가진 곳으로 화면 위치를 이동시켜주세요.

5.1.2 Relative URLs

relative URL은 프로토콜과 host 정보를 넣지 않습니다.

일반적으로 현재 문서의 리소스 경로와 같기 때문입니다.

리눅스의 상대경로와 같다고 봅시다.

예시)

base url : http://www.acme.com/support/intro.html

<A href="suppliers.html">Suppliers</A>

일 경우에 suppliers.html은 http://www.acme.com/support/suppliers.html 의 경로를 갖습니다.

5.1.3 URLs in HTML

HTML에서 URLs는 상황에 따라 역할을 가지고 있습니다.

1. linking to another document or resource, (see the A and LINK elements).
2. linking to an external style sheet or script (see the LINK and SCRIPT elements).
3. images, objects and applets for inclusion in a page, (see the IMG, OBJECT, APPLET and INPUT elements).
4. image maps (see the MAP and AREA elements).
5. form submission (see FORM).
6. frames (see the FRAME and IFRAME elements).
7. citing an external reference (see the Q, BLOCKQUOTE, INS and DEL elements).
8. referring to metadata conventions describing a document (see the HEAD element).

USER Agent는 RFC1808에 따라 상대경로를 풀어 해석할 때 base URL을 계산합니다.

단계 )

1. The base URL is set by the BASE element.
2. The base URL is given by an HTTP header (see [RFC2068]).
3. By default, the base URL is that of the current document.