HTML로 만드는 웹페이지에 그림을 넣을 때는 아래와 같은 코드를 사용합니다.
<img src = "">1. img: img는 "image"[이미지](이미지, 사진)의 약자로 HTML에서 웹 페이지에 이미지를 삽입할 때 사용하는 태그입니다.
2. src: src는 "source"[소스](출처)의 약자로 웹 페이지에서 이미지, 비디오, 스크립트 등 외부 자원의 경로를 지정할 때 사용하는 속성입니다.
HTML로 웹페이지에 그림을 넣을 때는 두 가지 방법이 있습니다.
첫 번째는 다른 웹 페이지의 그림을 옮겨넣기
두 번째는 내 컴퓨터의 그림을 옮겨 넣기입니다.
01. 다른 웹 페이지의 그림을 옮겨 넣기
1. 이미지 주소 복사
사용하고자 하는 그림에 마우스 우클릭을 한 후 이미지 주소를 복사합니다.
2. 코드의 <body> 부분에 삽입
<img src = "이미지 주소 삽입">을 이용하여 삽입합니다.
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요, HTML!</h1>
<p>HTML 문서의
<br>
기본 예제입니다.</p>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbXDA7Y%2FbtsLDHVzghH%2FAAAAAAAAAAAAAAAAAAAAAMjUWR2A0SWUoVu0l75xefVxWbpBzMfY1w4VJSBjS5J9%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DPdzpChc99IN%252Fg3Y9Qj%252FqKFchI3Q%253D">
</body>
</html>
02. 내 컴퓨터의 이미지 삽입
1. html파일이 있는 파일에 이미지를 저장합니다.
2. 코드의 <body>부분에 파일 이름 삽입
<img src = "이미지 파일 삽입">을 이용하여 파일 이름과 파일 확장명을 삽입합니다.
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요, HTML!</h1>
<p>HTML 문서의
<br>
기본 예제입니다.</p>
<img src="hellohtml.png">
</body>
</html>
03. 적용된 모습
그럼 아래와 같이 그림이 삽입됩니다.
04. 그림에 설명 넣기
그림에 설명을 넣을 수 있습니다.
<img src = "" alt="">의 alt 부분에 입력한 내용은 이미지를 열 수 없을 경우 나타나는 대체 텍스트입니다. 또한 인터넷 탐색기가 여러분의 웹페이지를 더 쉽게 찾을 수 있게 합니다.
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요, HTML!</h1>
<p>HTML 문서의
<br>
기본 예제입니다.</p>
<img src="hellohtml.png" alt="그림예시">
</body>
</html>'웹페이지 만들기 > HTML' 카테고리의 다른 글
| HTML로 웹페이지 만들기 4: 영역 나누기<div></div> (0) | 2025.01.06 |
|---|---|
| HTML로 웹페이지 만들기 2: 줄 바꿈 태그 <br> (0) | 2025.01.06 |
| HTML의 기본 구조 (0) | 2025.01.06 |
| HTML소개 (0) | 2025.01.06 |