HTML - 절대경로와 상대경로

전 게시물에서 실제로 배포했을 때 사진이 안뜨는 것을 경험하여 구글링을 해보니 이미지 파일을 작업할 때 절대 경로 와 상대 경로 라는 개념이 있다는 것을 알게 되었다.

절대 경로 (Absolute Path)

절대 경로는 어느 곳이든 동일한 위치를 갖는 경로를 말하고, http://, https를 사용한 URL을 생각하면 된다. 내가 첫 배포한 웹 페이지에 썼던 방식도 절대 주소의 방식을 사용한 것이고 이미지를 경로를 올리면 그대로 구현된다.

장점 : 작성중인 파일의 위치가 바뀌어도 영향을 받지 않는다.

단점 : 주소를 전체로 써야되기 때문에 불편하다.

상대 경로 (Relative path)

상대 경로는 현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로이다.
먼저 HTML 문서와 이미지 파일이 같은 폴더에 저장되어 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않는다. >> 전 웹 사이트에서 이렇게 했었다.
하위 폴더로 이동할때는 /(슬래쉬) 를 입력해주면 되고 상위 폴더로 이동할때는 ../ 로 표현해준다.

장점 : 내부의 파일을 불러올때 편하다.

단점 : 상대주소를 쓸 경우 이미지가 포함된 html 위치가 변경되면 이미지 경로도 그것에 맞게 바꿔주어야 한다.