background-img 경로

프로젝트 진행 중 경로 문제 발견

• 배경에 이미지를 넣어야 하는데 뜨지 않아서 오타인가,
  아니면 크기 지정인가 문제를 찾다가 경로 문제라는 사실을 알게 되었습니다.

 

경로 설정 방법

절대경로

• 지정되어 있어 변경 할 수 없는 경로
• 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결 할 때 사용 합니다.

<a href="http://xxxx.co.kr">바로가기</a>
<img src="http://xxxx.co.kr/img/logo.png" alt="">

 

상대경로

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

 

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

• index.html 파일이 저장된 위치를 기준으로 background.png 파일은
  동일한 위치에 있기 때문에 파일명과 확장자를 함께 쓰면 됩니다.

<img src="background.jpg" alt="">

 

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

• index.html 파일이 저장된 위치를 기준으로 logo.png 파일을 찾아갈 수 있도록 경로를 지정
• 폴더를 하나씩 들어갈 때마다, 슬래시(/) 기호 사용
• 폴더명 + 슬래시 + 파일명

<img src="img/logo.png" alt="">

 

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

• 상위 폴더를 하나 벗어날 때 마다 점 두개 (..) 슬래시(/) 사용
• 아래 둘 다 가능

.logo { background: url(../img/logo.png)}
.logo { background: url(../../img/logo.png)}