[HTML/CSS] HTML의 기본 구조 - 이미지 삽입하기

HTML 문서에 이미지 넣기

<img> 태그

<img> : 웹 페이지에 이미지 삽입 시 사용
  src 속성과 함께 사용
        - 이미지 파일의 이름과 경로
        - scr='img/dog.jpg'

📌

<!DOCTYPE html>
<!--src/main/webapp/3/image.html 
	이미지폴더 : src/main/webapp/3/img 폴더 생성.-->
<html>
<head>
<meta charset="UTF-8">
<title>image 태그</title>
</head>
<body>
<h3>반려동물이란</h3>
<p>사람과 더불어 살아가는 동물이란 의미로 1983년 오스트리아 빈에서 열린
애완동물 국제 심포지엄에서 처음으로 제안되었다 합니다.</p>
<img src="img/dog.jpg">
</body>
</html>

2. <img> 태그 속성

1) width, height 속성

: 이미지의 가로 및 세로 크기 조정

📌

<!DOCTYPE html>
<!-- src/main/webapp/3/image2.html 
	lizard.jpg
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- img/lizard.jpg : html 페이지의 위치부터 경로 시작 
	 ./img/lizard.jpg : html 페이지의 위치부터 경로 시작
	 ./ : 현재 폴더.
	 ../: 상위 폴더.	 
-->
<img src = 'img/lizard.jpg' title = '게코도마뱀'>
<br>
<!-- 이미지의 가로세로 길이 설정 -->
<img src = 'img/lizard.jpg' title = '게코도마뱀' width='200' height='200'>
<br>
<!-- 이미지의 가로세로 길이 설정 : 세로의 길이는 원이미지의 비율로 자동 설정됨 -->
<img src = 'img/lizard.jpg' title = '게코도마뱀' width='150'>
</body>
</html>

2) title 속성
: 이미지 위 마우스 올릴 시 표시할 메세지 작성

📌

<!DOCTYPE html>
<!-- src/main/webapp/3/page1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>게코 다마뱀</h3>
<img src="img/lizard.jpg">
<img src="img/lizard.jpg" width="200" height="200">
<img src="img/lizard.jpg" width="150">

<h4><a href="link1.html">메인으로 이동</a></h4>
</body>
</html>

📌

<!DOCTYPE html>
<!-- src/main/webapp/3/page2.html-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>크라운 피쉬</h3>
<img src = "img/fish.jpg">
<img src = "img/fish.jpg" title = "영화 니모의 주인공">

<h4><a href = "link1.html">메인으로 이동</a></h4>
</body>
</html>

저작자표시 (새창열림)

'수업(국비지원) > HTML, CSS' 카테고리의 다른 글

[HTML/CSS] CSS 적용 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - 테이블 삽입하기 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - 오디오,비디오 삽입하기, 링크걸기 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - HTML 태그 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 (0)	2023.04.17