이미지를 넣을 수 있는 img 태그를 배우다.
<!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>Document</title>
</head>
<body>
<!-- 이미지 태그: 웹 문서에 이미지를 보여줄 때 사용하는 태그
src 속성: 이미지 경로
alt 속성: 이미지 오류 발생 시 보여지는 텍스트-->
<!-- 절대경로: 어떤 폴더나 파일이 가진 고유한 경로, 이미지 주소 복사 -->
<img src="data:image/jpeg;base64,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" alt="이미지를 불러올 수 없음">
<!-- 상대경로: 특정 위치를 기준으로 폴더나 파일을 접근하는 경로 (주로 사용)
현재 위치 기준: ./폴더명/파일명.확장자 or 폴더명 (./ = 현재 폴더 위치를 뜻함)
루트 위치 기준: 최상위 폴더에서 접근하는 방식
상위 위치 기준: 상위 폴더로 올라가서 접근하는 방식 ../ (../ = 상위 폴더로 1칸 가기)
-> ../폴더명/파일명.확장자 or ../파일명.확장자 -->
<img src="img/루피.jpg" alt="이미지를 불러올 수 없음" width="150" height="150">
<img src="/HTML/img/싹도노.png" alt="">
</body>
</html>
이미지를 불러올 수 있는 태그 img 태그는 src, alt 속성을 가진다.
src는 이미지의 경로, alt는 이미지를 불러오는데 오류가 발생했을 시 나타나는 텍스트이다.
이미지의 경로는 크게 2가지로 나뉘는데 절대 경로, 상대 경로가 있다.
절대 경로는 쉽게 이미지를 우클릭하여 이미지 주소 복붙하면 된다.
주로 사용하는 상대 경로는 내 저장소에서 이미지 파일 위치를 찾아서 입력하면 된다.
내가 쉽게 생각한 것은 한 칸씩 이동하여 가계도에서 특정 인물 찾는 것처럼 생각하니 이해가 됐다.
코드의 파일과 이미지 파일이 같은 폴더에 위치하면./를 사용해서 시작하고,
바깥 폴더에 있다면 ../를 사용해서 상위 폴더로 나가서 이동하면 된다.
(자세한 내용은 코드의 주석을 참고하자)
'Front-End > HTML' 카테고리의 다른 글
| [HTML] Ex06_테이블.html (0) | 2023.06.10 |
|---|---|
| [HTML] Ex05_앵커태그.html (0) | 2023.06.10 |
| [HTML] Ex03_글자태그.html (0) | 2023.06.10 |
| [HTML] Ex02_문단태그.html (0) | 2023.06.09 |
| [HTML] Ex01_basic.html (0) | 2023.06.09 |
