목차

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

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

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

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)에서도 작동합니다.