[HTML] 이미지 태그 / 이미지주소 <img src="image 주소">

HTML 이미지(Image)

이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미합니다.

오늘날 웹 페이지에는 이러한 이미지가 매우 중요한 요소의 하나로 자리 잡고 있습니다.

웹 페이지에서 주로 사용되는 이미지의 종류는 다음과 같습니다.

JPG (JPEG) 이미지	GIF 이미지	PNG 이미지
기본 이미지(사진) 파일 확장자 jpg 웹용 해상도는 72dpi 인쇄용은 300dpi 로 사용	보통 움짤(움직이는 사진)이나 jpg 보다 용량을 작게 만든 이미지 파일	투명한배경의 이미지 일러스트나, 사진을 사용할때 주로 사용

이미지의 삽입

HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용합니다.

<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 이 태그를 사용함으로써 더 화려하고 멋진 홈페이지를 만들 수 있습니다.

src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다.

alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.

※ <img> 태그는 닫는 태그가 없습니다. 아니면 대채로 <img src="이미지주소" /> 주소 끝에 꺽쇠를 넣어주기도 합니다.

앞선 <a 링크>태그 포스팅에서 언급했듯이 여기에서도 절대경로와 상대경로로 이용해서 이미지 주소를 설정합니다.

꼭 숙지하고 넘어가야 경로 지정을 잘 할 수 있겠죠?

https://santamonicaboy.tistory.com/15

[web_tip] 절대경로와 상대경로 ?

♥ 절대경로와 상대경로 자세히 알기 우리가 코딩을 할 때 파일이나 이미지를 가져오는 경로로써 필수적으로 알아야 할 개념입니다. 절대경로는 거의 헷갈리지 않지만 상대경로를 헷갈려하는

santamonicaboy.tistory.com

이미지의 크기(width, height) 설정

HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있습니다.

또한, width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수도 있습니다.

위의 두 가지 방법 모두 HTML5 표준에는 적합한 방법이지만, 나중에 배우게 될 CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 style 속성을 사용하는 것이 좋습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Images</title>
	<style>
		img {
			width:100%;
			border: solid 1px black;
		}
	</style>
</head>

<body>

	<h1>이미지의 크기 설정</h1>
	<img src="/examples/images/img_logo.png" alt="html size" width="320" height="214">
	<img src="/examples/images/img_logo.png" alt="style size" style="width:320px; height:214px">

</body>

</html>

이미지의 테두리(border) 설정

border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있습니다.

<img src="/examples/images/img_logo.png" alt="이미지 테두리"
 style="width:320px; height:214px; border: 3px solid black">

이미지에 링크(link) 설정

이미지에 <a>태그를 이용하여 링크를 설정할 수 있습니다.

<a href="/html/intro" target="_blank">

    <img src="/examples/images/img_logo.png" alt="logo" style="width:320px; height:214px">

</a>

이미지 맵 만들기

HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있습니다.

이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미합니다.

<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정됩니다.

<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할을 합니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Images</title>
</head>

<body>

	<h1>이미지 맵 만들기</h1>
	<img src="/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending" 
    style="width:320px; height:240px" />
	<map name="vending"> 
		<area  shape="rect" coords="90,60,180,130" alt="거짓" 
         href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
		<area  shape="rect" coords="210,200,70,130" alt="진실"
         href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
	</map>
	<p>표지판을 눌러보세요!</p>

</body>

</html>

홈페이지에서 이미지 불러오기

어렵지 않아요 !

한 번 꼭 해보시길 바래요 :)

저작자표시

'share > html' 카테고리의 다른 글

[HTML] 리스트 태그 (list) - <ul><ol><li><dl><dt><dd> (0)	2022.02.04
[HTML] 이미지 태그 / 이미지주소 <img src="image 주소"> (0)	2022.02.03
[HTML] 하이퍼링크(hyperlink)와 타겟(target)넣기 (0)	2022.01.31
[HTML] 배경넣기 background color/image (0)	2022.01.30
[HTML] web에서 색 표현하기 (0)	2022.01.29

[HTML] 이미지 태그 / 이미지주소 <img src="image 주소">

'share > html' 카테고리의 다른 글

관련글

티스토리툴바