wiki:html:html_note:html_file_paths
목차
HTML Tutorial - HTML File Paths
- description : HTML Tutorial - HTML File Paths
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-01
The source of the article
HTML File Paths
파일 경로(file path)는 웹 사이트의 폴더 구조에서 파일의 위치를 설명합니다.
File Path Examples
| Path | Description |
|---|---|
| <img src=“picture.jpg”> | “picture.jpg” 파일은 현재 페이지와 같은 폴더에 있습니다. |
| <img src=“images/picture.jpg”> | “picture.jpg” 파일은 현재 폴더의 이미지 폴더에 있습니다. |
| <img src=“/images/picture.jpg”> | “picture.jpg” 파일은 현재 웹의 루트에 있는 이미지 폴더에 있습니다. |
| <img src=“./images/picture.jpg”> | “picture.jpg” 파일은 현재 웹의 루트에 있는 이미지 폴더에 있습니다. |
| <img src=“../picture.jpg”> | “picture.jpg” 파일은 현재 폴더에서 한 레벨 위의 폴더에 있습니다. |
HTML File Paths
파일 경로는 웹 사이트의 폴더 구조에서 파일의 위치를 설명합니다.
파일 경로는 아래와 같은 외부 파일에 연결할 때 사용됩니다.
- 웹 페이지 (Web pages)
- 이미지 (Images)
- 스타일 시트 (Style sheets)
- JavaScripts
Absolute File Paths
절대 파일 경로(absolute file path)는 파일에 대한 전체 URL입니다:
Example
<body> <h2>Using a Full URL File Path</h2> <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" style="width:300px"> </body>
Relative File Paths
상대 파일 경로(Relative file path)는 현재 페이지에 상대적인 파일을 가리킵니다.
다음 예제에서, 파일 경로(file path)는 현재 웹의 루트에 있는 이미지 폴더의 파일을 가리킵니다.
Example
<body> <h2>Using a Relative File Path</h2> <img src="./images/picture.jpg" alt="Mountain" style="width:300px"> <img src="/images/picture.jpg" alt="Mountain" style="width:300px"> <!-- / 와 ./ 는 동일한 경로를 의미합니다. --> </body>
다음 예제에서 파일 경로(file path)는 현재 폴더 내부에 있는 이미지 폴더의 파일을 가리킵니다.
Example
<body> <h2>Using a Relative File Path</h2> <img src="images/picture.jpg" alt="Mountain" style="width:300px"> </body>
다음 예제에서, 파일 경로(pile path)는 현재 폴더에서 한 레벨 위의 폴더에 있는 이미지 폴더의 파일을 가리킵니다.
Example
<body> <h2>Using a Relative File Path</h2> <img src="../images01/sky.jpg" alt="sky" style="width:300px"> </body>
Best Practice
가능한 경우 상대 파일 경로(relative file paths)를 사용하는 것이 가장 좋습니다.
상대 파일 경로(relative file paths)를 사용하면, 웹 페이지가 현재의 기본 URL에 바인딩 되지 않습니다.
모든 링크는 현재 공용 도메인 및 향후 공용 도메인 뿐만 아니라, 자신의 컴퓨터 (localhost)에서도 작동합니다.
/volume1/web/dokuwiki/data/pages/wiki/html/html_note/html_file_paths.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
