<!DOCTYPE html>
<!-- !DOCTYPE html : HTML5의 문서형 정의(DTD, Document Type Definition), 마크업 문서의 요소와 속성 등을 어떤 규칙에 따라 기술해야 하는지에 대한 기준을 의미한다. -->
<html lang="en">
<!-- 한글 : lang="ko" -->
<head>
<meta charset="UTF-8">
<!-- 문자 코드 세트 (meta) : 웹 브라우저에서 웹 페이지를 제작할 때 사용한 문자가 깨지지 않고 인코딩 되도록 하려면 meta 요소를 이용하여
문자 코드 세트를 지정해야 하는데 다국어 인코딩의 경우 uft-8을 지정할 수 있으며 한글은 euc-kr을 선언한다. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 다양한 문서정보 지정하기 : 웹 페이지 홍보의 수단으로 meta 요소를 이용하여 검색 키워드를 지정할 수 있으며 description값으로 웹 페이지의 요약 정보,
작성자 정보, 저작권 정보 및 검색 로봇 제어 여부 등의 문서정보를 지정할 수 있다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 태그 연습</title>
</head>
<body>
<h1>img 태그 익히기</h1>
<p>문서에 이미지를 넣을 때 사용되는 태그로 src(source) 속성을 이용하여 이미지 파일의 경로를 지정해서 이미지를 삽입합니다.<br>
alt 속성에 이미지 설명 혹은 대체 텍스트를 지정합니다. 이미지가 깨지거나 없을 경우 alt 속성의 이미지 설명이 표시됩니다.
</p>
<img src="./images/movie_01.jpg" alt="영화 변호인 포스터" width="300px">
<img src="./images/movie_02.jpg" alt="영화 겨울왕국 포스터" height="300px">
<img src="./images/movie_03.jpg" alt="영화 도둑들 포스터">
<!-- 절대경로 : 전체 구조 내에서의 위치를 표시하는 방법 (주소창의 경로)
상대경로 : 작업하고 있는 파일의 현재 위치를 기준으로 경로를 지정하는 방법
- 현재 문서와 같은 위치일 경우 : <img src="파일명">
- 하위 폴더에 위치한 경우 : <img src="하위폴더명/파일명">
- 상위 폴더에 위치한 경우 : <img src="../파일명"> <img src="../../파일명"> <img src="../하위폴더명/파일명">
-->
</body>
</html>
Engineering is the closest thing to magic that exists in the world.