프로그래밍/HTML
07 <img> 태그_절대경로, 상대경로
윤지(●'◡'●)
2021. 4. 17. 19:42
반응형
<img> 태그
img는 image의 약자로 즉, 그림이나 사진을 보여주는 태그 이다.
<img>태그는 종료태그 없이 단독으로 사용된다
<img src = "이미지가 위치하는 주소 또는 파일경로, 파일명" alt = "이미지를 대신할 문자">위에서 src는 source의 약자로 이미지의 원본 소스의 위치 정보를 받는 곳인데,
위치정보는 절대경로와 상대경로 두가지로 나누어 진다
1) 절대경로
- 고유한 전체 경로이다.
- http, https, file에 대한 경로이다. (file 경로는 웹사이트를 만들 때 사용X)
절대 경로로 이미지를 띄워보자 ( •̀ ω •́ )y
* 원하는 사이트-> 원하는 사진 우클릭 -> 이미지 주소 복사
* 문법에 맞춰 코드 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>이미지 - 1</title>
</head>
<body>
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고">
</body>
</html>[결과]
잠깐 ! 여기서 img 태그 내 alt는 무엇일까?
인터넷이 느리거나 파일 경로가 잘못됐을 때 이미지를 대체하는 설명
이외에는 시각장애인 같은 경우, 이미지를 볼 수 없기때문에 alt의 정보를 통해 어떤 사진인지
정보를 얻을 수 있다.
2) 상대경로
- html 문서를 기준으로 이미지 파일이 있는 경로를 입력하는 것이다.
이미지 파일의 위치는 정말 다양하기 때문에 아래와 같은 경우로 나눠 볼 수 있을 것 같다 :)
1) 이미지가 html 문서와 같은 폴더에 있는 경우
<img src ="파일명">,<img src ="./파일명">
2) 이미지가 하위 폴더에 있는경우
<img src ="폴더명/파일명">
<img src ="./폴더명/파일명">
3) 이미지가 상위 폴더에 있는 경우
<img src ="../파일명">
4) 이미지가 상위폴더 > 하위폴더에 있는 경우
<img src ="../하위폴더명/파일명">
한번 사용해보자 !
<!DOCTYPE html>
<html lang="en">
<head>
<title>이미지 - 1</title>
</head>
<body>
<h2>이미지</h2>
<img src="./dog1.png" alt="강아지1">
<img src="images/dog2.png" alt="강아지2">
</body>
</html>
[결과]
반응형