HTML 파일 경로(HTML File Paths)

Path	Description
<img src="picture.jpg">	picture.jpg is located in the same folder as the current page  picture.jpg는 현재 페이지와 같은 폴더에 있습니다.
<img src="images/picture.jpg">	picture.jpg is located in the images folder in the current folder  picture.jpg는 현재 폴더의 images 폴더에 있습니다.
<img src="/images/picture.jpg">	picture.jpg is located in the images folder at the root of the current web  picture.jpg는 현재 웹의 루트에있는 images 폴더에 있습니다.
<img src="../picture.jpg">	picture.jpg is located in the folder one level up from the current folder  picture.jpg는 현재 폴더에서 한 수준 위의 폴더에 있습니다.

---

HTML File Paths

HTML 파일 경로

A file path describes the location of a file in a web site's folder structure.

파일 경로는 웹 사이트의 폴더 구조에있는 파일의 위치를 ​​설명합니다.

File paths are used when linking to external files like:

파일 경로는 다음과 같은 외부 파일에 연결할 때 사용됩니다.

Web pages 웹 페이지

Images 이미지

Style sheets 스타일 시트

JavaScripts 자바 스크립트

---

Absolute File Paths

절대 파일 경로

An absolute file path is the full URL to an internet file:

절대 파일 경로는 인터넷 파일의 전체 URL입니다.

Example

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

Try it Yourself »

The <img> tag and the src and alt attributes are explained in the chapter about HTML Images.

<img> 태그와 src 및 alt 속성은 HTML 이미지 에 대한 장에서 설명합니다 .

---

Relative File Paths

상대 파일 경로

A relative file path points to a file relative to the current page.

상대 파일 경로는 현재 페이지를 기준으로 파일을 가리 킵니다.

In this example, the file path points to a file in the images folder located at the root of the current web:

이 예제에서 파일 경로는 현재 웹의 루트에있는 images 폴더의 파일을 가리 킵니다.

Example

<img src="/images/picture.jpg" alt="Mountain">

Try it Yourself »

In this example, the file path points to a file in the images folder located in the current folder:

이 예제에서 파일 경로는 현재 폴더에있는 images 폴더의 파일을 가리 킵니다.

Example

<img src="images/picture.jpg" alt="Mountain">

Try it Yourself »

In this example, the file path points to a file in the images folder located in the folder one level above the current folder:

이 예제에서 파일 경로는 현재 폴더의 한 수준 위의 폴더에있는 images 폴더의 파일을 가리 킵니다.

Example

<img src="../images/picture.jpg" alt="Mountain">

Try it Yourself »

---

Best Practice

베스트 프랙티스

It is best practice to use relative file paths (if possible).

가능한 경우 상대 파일 경로를 사용하는 것이 가장 좋습니다.

When using relative file paths, your web pages will not be bound to your current base URL. 

상대 파일 경로를 사용할 때 웹 페이지는 현재 기본 URL에 바인딩되지 않습니다. 

All links will work on your own computer (localhost) as well as on your current public domain and your future public domains. 

모든 링크는 자신의 컴퓨터 (로컬 호스트)뿐만 아니라 현재 공개 도메인 및 향후 공용 도메인에서도 작동합니다. 

---

출처 : W3School.com