HTML File Paths
파일 경로(file path)는 웹 사이트의 폴더 구조에서 파일의 위치를 설명합니다.
| 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” 파일은 현재 폴더에서 한 레벨 위의 폴더에 있습니다. |
파일 경로는 웹 사이트의 폴더 구조에서 파일의 위치를 설명합니다.
파일 경로는 아래와 같은 외부 파일에 연결할 때 사용됩니다.
절대 파일 경로(absolute file path)는 파일에 대한 전체 URL입니다:
<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 path)는 현재 페이지에 상대적인 파일을 가리킵니다.
다음 예제에서, 파일 경로(file path)는 현재 웹의 루트에 있는 이미지 폴더의 파일을 가리킵니다.
<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)는 현재 폴더 내부에 있는 이미지 폴더의 파일을 가리킵니다.
<body> <h2>Using a Relative File Path</h2> <img src="images/picture.jpg" alt="Mountain" style="width:300px"> </body>
다음 예제에서, 파일 경로(pile path)는 현재 폴더에서 한 레벨 위의 폴더에 있는 이미지 폴더의 파일을 가리킵니다.
<body> <h2>Using a Relative File Path</h2> <img src="../images01/sky.jpg" alt="sky" style="width:300px"> </body>
가능한 경우 상대 파일 경로(relative file paths)를 사용하는 것이 가장 좋습니다.
상대 파일 경로(relative file paths)를 사용하면, 웹 페이지가 현재의 기본 URL에 바인딩 되지 않습니다.
모든 링크는 현재 공용 도메인 및 향후 공용 도메인 뿐만 아니라, 자신의 컴퓨터 (localhost)에서도 작동합니다.