HTML / (38) 파일 경로

▶ 파일경로는 웹 사이트의 폴더 구조에서 파일의 위치를 설명한다.

 

■ 파일 경로 예시

▶ <img scr="picture.jpg"> : "picture.jpg" 파일은 현재 페이지에 같은 폴더에 위치해 있다.

▶ <img src="images/picture.jpg"> : "picture.jpg" 파일은 현재 폴더에 images 폴더 안에 위치해 있다.

▶ <img src="/images/picture.jpg"> : "picture.jpg" 파일은 현재 페이지의 최상위에서 image 폴더 안에 위치해 있다.

▶ <img src="../picture.jpg"> : "picture.jpg" 파일은 현재 폴더로부터 윗 단계의 폴더에 위치해 있다.

 

■ HTML 파일 경로

▶ 파일 경로는 웹 사이트의 폴더 구조에서 파일의 위치를 설명한다.

▶ 파일 경로는 아래에 예시와 같이 외부 파일을 연결할 때 사용된다.

▷ 웹 페이지

▷ 이미지

▷ 스타일 시트(CSS)

▷ 자바스크립트(Javascript)

 

■ 파일 절대 경로

▶ 파일 절대 경로는 파일의 전체 URL이다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_files_absoulute 

 

■ 파일 상대 경로

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

▶ 아래에 예시에서 파일 경로는 현재 페이지의 최상위 경로에 위치한 images 폴더에 파일을 가리킨다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_files_relative 

 

▶ 아래에 예시에서 파일 경로는 현재 폴더에 위치한 images 폴더에 파일을 가리킨다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_files_relative_1 

 

▶ 아래에 예시에서 파일 경로는 현재 폴더로 부터 윗 단계의 폴더 안에 위치한 images 폴더에 파일을 가리킨다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_files_relative_2 

 

■ 모범 사례

▶ 가능하면 파일 상대 경로를 사용하는 것이 좋다.

▶ 파일 상대 경로를 사용할 때 웹 페이지는 현재 기본 URL에 bound 되지 않는다.

▶ 모든 링크는 자신의 컴퓨터와 현재 공개 도메인 및 향후 공개 도메인에서 작동한다.

 

출처 : https://www.w3schools.com/html/html_filepaths.asp

HTML File Paths