경로(Path)
- 문서에서 다른 문서로 연결하거나 문서 내에 이미지 및 음악 파일을 넣을 때, 해당 파일의 위치를 브라우저에게 알려주어야 한다.
- <a>는 href 속성을 이용해서, <img>는 src 속성을 이용해서 명시한다.
- 이 때, 해당 파일의 위치를 경로(path)라고 한다.
- 경로를 표기할 때 두가지 방법이 있는데 절대경로와 상대경로가 있다.
절대경로(Absolute path, Absolute pathname, Full path)
- 루트 디렉토리를 포함한 주소를 갖는 경로
- 컴퓨터 상의 디렉토리에서 C:\를 항상 포함
- URL에서는 http://를 항상 포함
- 항상 기준은 루트가 됨
- 언제 쓰는가: 일반적으로 다른 사람이 만든 문서나 파일을 연결할 때, 그 외 다른 사이트를 연결할 때
- 장점:
- 루트 디렉토리를 항상 포함하기 때문에 외부에서도 절대경로를 이용하여 파일 연결 가능
- 어디에서나 해당 파일을 찾을 수 있음
- 단점:
- 서버의 주소가 달라지면 절대경로로 설정된 주소들을 모두 수정해야 함
- 로딩속도는 상대경로에 비해 느림
- 이유: 서버 내부에서 처리가 되는게 아니고 DNS조회를 통해 해당파일을 찾기 때문
상대경로(Relative path)
- 루트 디렉토리를 포함하지 않는 주소를 갖는 경로
- 현재 참조하고 있는 문서가 항상 기준이 되고, 이 문서를 통해 상위, 하위 또는 현재폴더를 연결
상위폴더 ../파일명
현재폴더 파일명
하위폴더 디렉토리명/파일명
- 장점:
- 서버주소가 달라져도 이전 서버와 디렉토리 구조만 같다면 경로수정 안해도 됨
- 이유: 현재문서를 기준으로 경로를 연결, 루트 디렉토리는 사용하지 않음
- 서버주소가 달라져도 이전 서버와 디렉토리 구조만 같다면 경로수정 안해도 됨
결론
- 내부파일을 불러올 때 상대경로
- 외부파일을 불러올 때 절대경로
What Does Absolute Path Mean?
An absolute path refers to the complete details needed to locate a file or folder, starting from the root element and ending with the other subdirectories. Absolute paths are used in websites and operating systems for locating files and folders.
An absolute path is also known as an absolute pathname or full path.
There are two types of paths: absolute and relative paths. An absolute path always contains the root element and the complete list of directories to locate the specific file or folder. All the information required to locate the file or folder is available in the absolute path. This is different from a relative path, which is often combined with other paths to access the file. When it comes to websites, the absolute paths always contain the domain name of the website. However, in the case of a relative path, it only points to a relative link.
It is for these reasons that relative paths are used when linking within pages or files within a site, whereas absolute paths can be used anywhere and are needed when linking to an external file/folder on a different website. In the case of operating systems, the absolute path can be determined by right-clicking on the file/folder and then selecting the “properties” option.
Reference:
[1] 절대경로(Absolute Path)와 상대경로(Relative Path): https://darkcity1.tistory.com/2 [유토피아]
[2] Absolute Path: https://www.techopedia.com/definition/5817/absolute-path
'Frontend 👩🏻💻 > HTML&CSS' 카테고리의 다른 글
[CSS] Flexbox Froggy Game (0) | 2021.10.29 |
---|---|
[HTML] IE 호환성 크로스 브라우징 (Cross-browsing) (0) | 2021.10.22 |
[HTML] 반응형 웹 (Responsive) 처리 (0) | 2021.10.22 |
[HTML] <head>안에 들어가는 내용 (0) | 2021.10.22 |
[CSS] #1-2 박스모델과 box-sizing (0) | 2021.10.13 |