[HTML] 파일 경로 File Paths

HTML 로고

---

파일 경로는 다음과 같이 외부 파일에 연결할 때 사용됩니다.

• Web pages
• Images
• Style sheets (CSS파일)
• JavaScripts (JS파일)

 

HTML 파일 경로는 크게 2가지로 구분할 수 있습니다.

 

▶ 절대 파일 경로 (Absolute File Paths)

▶ 상대 파일 경로 (Relative File Paths)

 

 

---

1. 절대 파일 경로

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

▶ 위 예시처럼, 절대 파일 경로는 파일로 다다르는 전체 URL 주소를 뜻합니다.

 

---

2. 상대 파일 경로

상대 파일 경로는 제목에서도 알 수 있듯, 현재 html 파일을 기준으로 원하는 파일의 위치 경로를 나타냅니다.

예시1)
<img src="picture.jpg" alt="Mountain">

예시2)
<img src="images/picture.jpg" alt="Mountain">

예시3)
<img src="/images/picture.jpg" alt="Mountain">

예시4)
<img src="../picture.jpg" alt="Mountain">

▶ 예시1의 경우,

picture.jpg 파일이 현재 작업 중인 html 파일과 같은 폴더에 있을 경우 사용합니다.

 

▶ 예시2의 경우,

 picture.jpg 파일은 현재 작업 중인 html 파일과 같은 폴더 안에 있는 images라는 폴더 안에 위치하고 있을 때 사용합니다.

 

▶ 예시3의 경우,

picture.jpg 파일이 현재 웹의 루트 디렉토리에 있는 images 폴더 안에 위치하고 있을 때 사용합니다.

 

▶ 예시4의 경우,

picture.jpg 파일이 현재 작업 중인 html 파일이 있는 폴더보다 한 단계 상위 폴더 안에 위치하고 있을 때 사용합니다.

 

▶ alt="Mountain"

만약, picture.jpg 파일을 불러오는데 실패할 경우, 이미지 자리에 어떤 이미지가 뜨려고 했는지 텍스트로 알려주는 역할을 한다.

위의 경우, picture.jpg 파일이 깨지면, 그 자리에 Mountain이라는 글자가 보일 것이다.

 

---