File paths

vancouver·2023년 4월 16일
0

HTML 이해하기

목록 보기
4/5
post-custom-banner
<h1>All the Animals</h1>
<h2>Rabbit:</h2>
<img src="../Folder0/rabbit.png",alt="rabbit"/>
<h2>Cat:</h2>
<img src="./Folder3/cat.png",alt="cat"/>
<h2>Dog:</h2>
<img src="../dog.png",alt="dog"/>
<h2>Fish:</h2>
<img src="../Folder1/fish.png",alt="fish"/>
<h2>Bird:</h2>
<img src="../Folder1/Folder2/bird.png",alt="bird"/>


상대 파일경로

<img src="../Folder0/rabbit.png">

상대 파일 경로는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식함
위 예제에서는 현재 웹 루트에 있는 Folder0 폴더의 파일을 가리킴
(이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지 등을 따져보고 경로를 지정해줘야함)
만약 문서와 이미지 파일이 같은 경로에 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않으나
다른 폴더에 있다면 이 다른폴더에 위치를 지정해줘야함

상대 경로 표기 방식

./ : 현재 폴더
../ : 상위 폴더

절대 파일 경로

<img src="https://www.w3schools.com/images/flower.jpg"/>

특징

  • 어느 위치에서든 접근이 가능하도록 표기하는 경로 방식
  • 주소의 길이가 길다
  • 이전을 하게되면 주소의 업데이트가 반드시 필요
post-custom-banner

0개의 댓글