상대경로, 절대경로 예시 (이미지 파일 넣기)

상대경로

./(생략가능) : 주변(현재 폴더)

../ : 상위 폴더

 

절대경로

http(https) : 원격

/ (//) : 루트

 

직접 경로 지정(현재 위치 기준)

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

원격 경로 지정

<img src="https://mblogthumb-phinf.pstatic.net/MjAxNzExMjRfMTE5/MDAxNTExNTAwMTU5OTAy.o5AjoyDFlU81ZDlnS9R6aMrPVekWFwCM2pd655bybcwg.s11lssgDvgnGOzD1EqsAgtwTCxkHTUDVtpgTxnKdiK4g.JPEG.knightsws/%EB%AC%B4%EB%A3%8C_%EA%B0%95%EC%95%84%EC%A7%80_%EC%95%84%EC%9D%B4%EC%BD%98_8.JPEG?type=w800" alt="">

 

css에서 경로 지정(상위 디렉터리로 이동)

div {
  /* color: red;
  font-size: 100px; */
  width: 600px;
  height: 600px;
  background: url("../images/logo.png");
}

확인

 

이미지 출처

https://m.blog.naver.com/PostView.nhn?blogId=knightsws&logNo=221147516911&proxyReferer=https:%2F%2Fwww.google.com%2F

저작권 없는 무료 강아지 일러스트, 아이콘 v5