본문 바로가기

FRONT/CSS

[CSS] 절대 경로 & 상대 경로

 

 

1. 절대 경로

이미 지정되어 있어 변경할 수 없는 경로.

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

 

https://devel-log.tistory.com/ 

 

<a href="https://devel-log.tistory.com/">개발로그</a>

 

 

2. 상대 경로

상대적으로 변경될 수 있는 경로.

상대경로 지정시 유의점

 

1. 현재 문서를 기준으로 경로가 지정 된다.

ex) 동일 폴더에 있는 css를 추가하고 싶을 경우

 

 <link rel="stylesheet" type="text/css" href="sample.css">

 

 

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

 

ex) <a href="list.jsp"> , <img src="picture.png">

 

 

3. 현재 문서를 기준으로 하위 폴더에 있을 때 : 폴더명 + /+파일명.확장자를 기재한다.

 

ex) <a href="pages/main.html"> , <link rel="stylesheet" href="css/style.css">,
	<img src="images/mainpicture/picture.png">

 

 

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

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

 

+

/ 를 맨 앞에 사용할 경우 : 최상위 폴더부터 경로가 시작되니 주의.

 

 <link rel="stylesheet" type="text/css" href="/css/sample.css">