HTML 파일 경로

경로 설명
<img src="picture.jpg"> picture.jpg 현재 웹 페이지와 같은 폴더에 위치합니다
<img src="images/picture.jpg"> picture.jpg 현재 폴더의 images 폴더에 위치합니다
<img src="/images/picture.jpg"> picture.jpg 현재 사이트 루트 디렉토리의 images 폴더에 있습니다
<img src="../picture.jpg"> picture.jpg은 현재 폴더의 상위 폴더에 있는 위치에 있습니다.

HTML 파일 경로

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

파일 경로는 외부 파일을 링크할 때 사용됩니다:

  • 웹 페이지
  • 이미지
  • 스타일 시트
  • JavaScript

절대 파일 경로

절대 파일 경로는 인터넷 파일을 가리키는 전체 URL입니다:

예제

<img src="https://www.codew3c.com/images/picture.jpg" alt="flower">

<img> 태그 및 src와 alt 속성은 HTML 이미지 장에서 설명되었습니다.

상대 경로

상대 경로는 현재 페이지에 대한 상대적인 파일을 가리킵니다.

이 예제에서는 파일 경로가 현재 웹 사이트 루트 디렉토리에 있는 images 폴더에 있는 파일을 가리킵니다:

예제

<img src="/images/picture.jpg" alt="flower">

이 예제에서는 파일 경로가 현재 폴더에 있는 images 폴더에 있는 파일을 가리킵니다:

예제

<img src="images/picture.jpg" alt="flower">

이 예제에서는 파일 경로가 현재 폴더의 상위 폴더에 있는 images 폴더에 있는 파일을 가리킵니다:

예제

<img src="../images/picture.jpg" alt="flower">

좋은 습관

상대 경로를 사용하는 것은 좋은 습관입니다(가능한 경우).

상대 경로를 사용하면, 웹 페이지가 현재 기준 URL과 연결되지 않습니다. 모든 링크는 컴퓨터(localhost) 또는 미래의 공공 도메인에서 정상적으로 작동합니다.