CSS: href 속성, src 속성 절대경로, 상대경로

절대경로는 아시는 바와 같이 이미 지정되어 있어 변경할 수 없는 경로를 말합니다.

페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결시킬 때 사용하는 경우입니다.

 

<a href="http://XXXXX.co.kr">사이트바로가기</a>

<img src="http://XXXX.co.kr/images/logo.jpg" alt="혜정스블로그">

 

일반적으로 하나의 웹페이지 또는 사이트를 제작할 때,

제작의 효율성을 위해 파일의 형식이 같은 파일들을 하나의 폴더안에 저장합니다.

​

 

(1) 현재 파일을 기준으로 동일 위치로 연결되는 경우

아래의 그림과 같은 폴더 구조를 가진 웹사이트에서

index.html 파일에 favicon.png 를 연결시키는 코딩을 하려고 합니다.

 

index.html 파일이 저장된 위치를 기준으로

favicon.png 파일은 동일한 위치에 저장되어 있기 때문에 파일명과 확장자를 함께 기재해주면 됩니다.

-- index.html 파일  소스 중​

<link rel="icon" type="image/png" href="favicon.png"> 

 

(2) 현재 파일을 기준으로 하위폴더로 연결되는 경우

아래의 그림과 같은 폴더 구조를 가진 웹사이트에서

index.html 파일 내부에 images폴더에 있는 logo.gif를 연결시키는 코딩을 하려고 합니다.

index.html 파일이 저장된 위치를 기준으로 logo.gif 파일을 찾아갈 수 있도록 경로를 지정합니다. 

즉,  images 폴더를 들어가서, 폴더 안에 있는  logo.gif 를 만날 수 있도록 경로를 설정해 주면 되겠습니다.

폴더를 하나 들어갈 때마다, 슬래쉬(/) 기호를 사용합니다.

-- index.html 파일  소스 중

<img src="images/logo.gif" alt="혜정스">

 

(3) 현재 파일을 기준으로 상위폴더로 연결되는 경우

아래의 그림과 같은 폴더 구조를 가진 웹사이트에서

style.css 파일 내부에 images폴더에 있는 logo.gif를 배경이미지로 연결시키는 코딩을 하려고 합니다.

style.css 파일이 저장된 위치를 기준으로 logo.gif 파일을 찾아갈 수 있도록 경로를 지정합니다.

즉,  상위폴더인 css폴더를 벗어납니다.

그런 후에 images 폴더를 들어가서, 폴더 안에 있는  logo.gif 를 만날 수 있도록 경로를 설정해 주면 되겠습니다.

폴더를 하나 들어갈 때마다, 슬래쉬(/) 기호를 사용한다면, 상위폴더를 하나 벗어날때마다는 쩜. 쩜. 슬래쉬 ( ../ ) 를 사용합니다.

-- style.css 파일  소스 중

.logo { background: url(../images/logo.gif) no-repeat; }

 

현재의 index.html 파일은 상위 루트에 있는데

똑같은 파일을 아래와 같이 pages 폴더를 만들고 index.html을 이동시켜 저장하였다면

코딩을 어떻게 바뀔까요?

 

index.html 파일을 기준으로 logo.gif 파일을 연결시키기 때문에 폴더가 이동되면서 경로는 상대적으로 변하게 됩니다.

즉, index.html 파일의 상위 폴더인 pages 폴더를 벗어나서 ( ../ ) images 폴더에 들어가는 경로로 지정해야 할 것입니다.

-- index.html 파일  소스 중

<img src="../images/logo.gif" alt="혜정스">

똑같은 index.html 파일이었는데, 기준파일이 저장된 위치에 따라 외부자원을 연결시킬 때 지정경로가 달라지는 것을 볼 수 있었습니다.

이것을 상대경로라고 합니다.

​

요약해 보자면

 

(1) 경로지정의 종류 

      - 상대경로 : 현재 문서를 기준으로 하여 연결되는 경로가 상대적으로 변할 수 있는 것

      - 절대경로 : 현재 문서와 상관없이 변하지 않는 경로

(2) 상대경로 지정시 유의점

     - 현재 문서를 기준으로 경로가 지정됨

     - 현재 문서와 동일 위치에 있는 자원을 연결시킬 때 : 파일명과 확장자 정보를 기재함

         ex) <a href="info.html"> , <img src="logo.gif">

     - 현재 문서를 기준으로 하위폴더 안에 있을 때 :  폴더명 + 슬래쉬 (/) + 파일명과 확장자 를 기재함

         ex) <a href="pages/info.html"> , <link rel="stylesheet" href="css/style.css">, <img src="images/main/logo.gif">

      - 현재 문서를 기준으로 상위 폴더에 있을 때 :  상위 폴더 한 개를 벗어날 때 마다 ../ 를 사용함

         ex) <a href="../pages/info.html"> , <link rel="stylesheet" href="../css/style.css">, <img src="../../logo.gif">