css 공부 : 절대경로, 상대경로 알아보기

절대경로

다른 서버에 있는 이미지, 파일 등 주소로 연결시켜줍니다.

<div>
  <a href="https://velog.io/@korea_webclass">사이트 바로가기</a>
  <img src="https://velog.io/@korea_webclas/images/webclass_logo.jpg" alt="웹클래스">
</div>

절대경로 설명

웹사이트 주소로 시작합니다.

---

상대경로

현재 폴더에서 경로를 지정하고 연결시켜줍니다.

<div class="img">
  <a href="./main.html">메인 페이지 바로가기</a>
</div>

img {
  background-image: url('../image/webclass_logo.png');
}

상대경로 설명

파일에서 url 경로는 ../ 으로 시작합니다.
../ 상위 디렉토리
./ 현재 문서의 디렉토리
/ 현재 문서의 가장 최상위 디렉토리