CSS 이미지(절대경로 vs 상대경로)
이미지 경로
- 절대 경로
절대경로란, 아마 지정되어 있어 변경할 수 없는 경로를 뜻한다.
페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결 시킬때 사용한다.
ex) 사이트 바로가기
- 상대 경로
상대 경로란, 상대적으로 변경될 수 있는 경로를 말한다.
(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 파일을 찾아갈 수 있도록 경로를 지정한다.
폴더를 하나씩 들어갈 때마다, 슬래쉬(/) 기호를 사용한다.
index.html 파일 소스 중
<img src="images/logo.gif" alt="이미지">
(3) 현재 파일을 기준으로 상위 폴더로 연결되는 경우
style.css 파일이 저장된 위치를 기준으로 logo.gif 파일을 찾아갈 수 있도록 경로를 지정한다.
폴더를 하나 들어갈 때마다, 슬래쉬(/)기호를 사용한다면, 상위 폴더를 하나 벗어날 때마다 점(.) 점(.) 슬래쉬(/) 를 사용한다.
sytle.css 파일 소스 중
.logo { background: url(../images/logo.gif) no-repeat; }
이쯤에서 다른 예를 들수 있다.
만약 현재 index.html 파일은 상위 루트에 있고, 똑같은 파일을 아래와 같이 pages 폴더를 만들고 index.html을 이동시켜 저장 했다면 어떻게 될까?
index.html 파일을 기준으로 logo.gif 파일을 연결하기 때문에 폴더가 이동되면서 경로는 상대적으로 변하게 된다.
index.html 파일의 상위 폴더인 pages 폴더를 벗어나 ( ../ ) images 폴더에 들어가는 경로로 지정해야 한다.