문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== HTML Tutorial - HTML File Paths ======
<WRAP left notice 80%>
  * description : HTML Tutorial - HTML File Paths
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-01
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article===== 
[[https://www.w3schools.com/html/html_filepaths.asp|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====
<code html>
<body>

  <h2>Using a Full URL File Path</h2>
  <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" style="width:300px">

</body>
</code> 

=====Relative File Paths=====
상대 파일 경로(Relative file path)는 현재 페이지에 상대적인 파일을 가리킵니다.\\
\\
다음 예제에서, 파일 경로(file path)는 현재 웹의 루트에 있는 이미지 폴더의 파일을 가리킵니다.\\

====Example====
<code html>
<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>
</code>
\\
다음 예제에서 파일 경로(file path)는 현재 폴더 내부에 있는 이미지 폴더의 파일을 가리킵니다.\\

====Example====
<code html>
<body>

  <h2>Using a Relative File Path</h2>
  <img src="images/picture.jpg" alt="Mountain" style="width:300px">

</body>
</code>
\\
다음 예제에서, 파일 경로(pile path)는 현재 폴더에서 한 레벨 위의 폴더에 있는 이미지 폴더의 파일을 가리킵니다.\\

====Example====
<code html>
<body>

  <h2>Using a Relative File Path</h2>
  <img src="../images01/sky.jpg" alt="sky" style="width:300px">

</body>
</code>

=====Best Practice=====
가능한 경우 상대 파일 경로(relative file paths)를 사용하는 것이 가장 좋습니다.\\
\\
상대 파일 경로(relative file paths)를 사용하면, 웹 페이지가 현재의 기본 URL에 바인딩 되지 않습니다.\\ 
모든 링크는 현재 공용 도메인 및 향후 공용 도메인 뿐만 아니라, 자신의 컴퓨터 (localhost)에서도 작동합니다.\\

\\
{{tag>오션 HTML File Paths}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
