반응형
파일 경로는 웹 사이트의 폴더 구조에서 파일의 위치를 설명한다.
파일 경로 예는 다음과 같다.
| 경로 | 설명 |
| <img src="pic.jpg"> | "picture.jpg" 파일은 현재 페이지와 동일한 폴더에 있습니다. |
| <img src="picture/pic.jpg"> | "picture.jpg" 파일은 현재 폴더의 이미지 폴더에 있습니다. |
| <img src="/picture/pic.jpg"> | "picture.jpg" 파일은 현재 웹의 루트에 있는 이미지 폴더에 있습니다. |
| <img src="../pic.jpb"> | "picture.jpg" 파일은 현재 폴더보다 한 단계 높은 폴더에 있습니다. |
HTML 파일 경로
파일 경로는 웹 사이트의 폴더 구조에서 파일의 위치를 설명한다.
파일 경로는 다음과 같이 외부 파일에 연결할 때 사용된다:
- 웹 페이지(Web pages)
- 이미지들(Images)
- 스타일 시트(style sheets)
- 자바스크립트(JavaScripts)
절대 파일 경로(Absolute File Path)
절대 파일 경로는 파일에 대한 전체 URL입니다:
| <!DOCTYPE html> <html> <body> <h2>전체 파일 경로</h2> <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html> |
상대 파일 경로(Relative File Path)
상대 파일 경로는 현재 페이지를 기준으로 하는 파일을 가리킨다.
다음 예제에서 파일 경로는 현재 웹 루트에 있는 이미지 폴더의 파일을 가리킨다:
| <!DOCTYPE html> <html> <body> <h2>상대 파일 경로</h2> <img src="/images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html> |
다음 예제에서 파일 경로는 현재 폴더에 있는 이미지 폴더의 파일을 가리킨다:
| <!DOCTYPE html> <html> <body> <h2>상대 파일 경로</h2> <img src="images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html> |
다음 예제에서 파일 경로는 현재 폴더보다 한 단계 높은 폴더에 있는 이미지 폴더의 파일을 가리킨다:
| <!DOCTYPE html> <html> <body> <h2>한 단계 높은 상대 파일 경로</h2> <img src="../images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html> <!DOCTYPE html> <html> <body> <h2>상대 경로 파일</h2> <img src="images/picture.jpg" alt="Mountain" style="width:300px"> </body> </html> |
파일 경로 최상의 선택 방법
가능한 경우 상대 파일 경로를 사용하는 것이 좋다.
상대 파일 경로를 사용할 때 웹 페이지는 현재 기본 URL에 바인딩되지 않는다. 모든 링크는 사용자의 컴퓨터(로컬 호스트)와 현재 공용 도메인 및 향후 공용 도메인에서 작동한다.
지금까지 HTML 파일 경로에 대해 간략히 살펴보았다.
꼭 실습해보기를 추천한다.
모두 화이티입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML HEAD 요소 (0) | 2023.05.23 |
|---|---|
| HTML 자바스크립트(Javascript) (0) | 2023.05.22 |
| HTML Iframe (0) | 2023.05.20 |
| HTML id 속성 (0) | 2023.05.19 |
| HTML 클래스 속성(Class Attributes) (0) | 2023.05.18 |
댓글