728x90
이미지 태그 <img>
📌
img는 그림이나 사진을 보여주는 태그입니다.
<img src="이미지가 위치하는 주소 또는 파일 경로, 파일명" alt="이미지를 대신할 문자">
src는 원본의 위치 정보를 받는 곳이고 alt는 화면에 이미지가 안 나올 때 이미지를 대체해서 설명해 주는 곳
alt는 시각장애인에게 어떤 사진인지 정보를 전달하는 역할도 한다.
파일 경로 오류로
나오는 alt 이미지
- 파일 경로 작성 방법
1. 절대 경로
- 고유한 전체 경로
- http, https, file에 대한 경로(file 경로는 사용하지 않음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 - test</title>
</head>
<body>
<h2>이미지</h2>
<!-- 절대 경로 -->
<img src="https://www.leagueoflegends.com/static/logo-1200-589b3ef693ce8a750fa4b4704f1e61f2.png" alt="롤로고">
</body>
</html>- 결과 보기~
2. 상대 경로
📌
- HTML 문서를 기준으로 경로
- 이미지가 HTML 문서와 같은 폴더에 있는 경우는 파일명만 사용
<img src="파일명">, <img src="./파일명">
- 이미지가 images(하위) 폴더에 있는 경우
<img src="폴더명/파일명">, <img src="./폴더명/파일명"/>
- 이미지가 상위 폴더에 있는 경우
<img src="../images/파일명">
1. 이미지 파일이 같은 폴더에 있는 것과
2. 이미지가 하위 폴더에 있는 경우 해보기!
폴더 구성 아래 사진처럼 되어있다.
이미지.html에서 image폴더에 있는 img2.png를 사용할 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지test - 1</title>
</head>
<body>
<h2>이미지</h2>
<!-- 상대 경로 -->
<img src="./img1.png" alt="이미지1번">
<img src="./image/img2.png" alt="이미지2번">
</body>
</html>- 결과 보기~
위에 글 내용은 오류 사항이 존재할 수 있습니다!
수정 사항이 있을 시 알려주시면 감사하겠습니다.
728x90
'HTML' 카테고리의 다른 글
| 3. HTML - HTML속성, 서식 태그 (0) | 2022.09.06 |
|---|---|
| 2. HTML - <p>문단 태그, <h>제목 태그 (0) | 2022.09.06 |
| 1. HTML - 특수문자, 주석문 (0) | 2022.09.06 |
댓글