22.HTML File Paths
익스랩 최고 관리자
·2019. 11. 27. 00:30
경로 | 설명 |
<img src="picture.jpg"> | picture.jpg는 현재 페이지와 동일한 폴더에 있습니다 |
<img src="images/picture.jpg"> | picture.jpg는 현재 폴더의 image 폴더에 있습니다. |
<img src="/images/picture.jpg"> | picture.jpg는 현재 웹 루트의 image 폴더에 있습니다. |
<img src="../picture.jpg"> | picture.jpg는 현재 폴더에서 한 단계 위의 폴더에 있습니다. |
HTML 파일 경로
파일 경로는 웹 사이트의 폴더 구조에서 파일의 위치를 설명합니다. 파일 경로는 다음과 같이 외부 파일에 연결할 때 사용됩니다.
- 웹 페이지
- 이미지
- Style sheets
- JavaScripts
절대 파일 경로
절대 파일 경로는 인터넷 파일의 전체 URL을 작성해야 합니다.
예시
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
<img> 태그는 HTML Images에서 자세히 설명합니다. |
상대 파일 경로
상대 파일 경로는 현재 페이지를 기준으로 파일을 가리 킵니다.
예시
- 해당 예제에서 파일 경로는 현재 웹의 루트에 있는 이미지 폴더의 파일을 가리 킵니다.
<img src="/images/picture.jpg" alt="Mountain">
예시
해당 예제에서 파일 경로는 현재 폴더에 있는 images 폴더의 파일을 가리 킵니다.
<img src="images/picture.jpg" alt="Mountain">
예시
해당 예제에서 파일 경로는 현재 폴더보다 한 단계 위 폴더에 있는 images 폴더의 파일을 가리 킵니다.
<img src="../images/picture.jpg" alt="Mountain">
모범 사례
상대 파일 경로를 사용하는 것이 가장 좋습니다 (가능한 경우).
상대 파일 경로를 사용하면 웹 페이지가 현재 기본 URL에 바인딩되지 않습니다.
모든 링크는 자신의 컴퓨터 (localhost)와 현재 public 도메인 및 향후 public 도메인에서 작동합니다.
틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.
질문도 올려주시면 아는 선에서 답변해드리겠습니다.
대부분의 내용의 저작권은 w3schools에 있습니다.
'IT 언어 연구소 > HTML,CSS [초급, 기본 개념, W3C 번역]' 카테고리의 다른 글
23.HTML Head (0) | 2019.11.30 |
---|---|
21. HTML JavaScript (0) | 2019.11.27 |
20.HTML Iframes (0) | 2019.11.22 |
19. HTML Id (0) | 2019.11.19 |
18.HTML Classes (0) | 2019.11.18 |