HTML의 Alt 태그

HTML img 태그에는 alt 속성이 포함되어 있습니다. 이 속성은 이미지 이름, 이미지 링크, 이미지 작성자, 이미지 사양 등과 같은 이미지에 대한 정보를 지정합니다. 이 속성의 주요 목적은 인터넷 연결이 느릴 때 이미지가 로드되지 않을 수 있지만 문제 없이 로드되는 것입니다. 따라서 사용자가 페이지에서 돌아가는 대신 사용자가 페이지에서 커서를 이동하면 이미지와 관련된 일부 텍스트가 표시됩니다. 따라서 이 페이지에 내용이 있다는 것을 이해하고 페이지가 로드될 때까지 잠시 기다릴 수 있습니다.

실시간 시나리오: 웹에 이미지를 표시하는 동안 이미지의 내용을 모르는 최종 사용자에게는 공정하지 않습니다. 따라서 alt 속성을 사용하여 이미지에 일부 내용을 지정해야 합니다.

HTML에서 Alt 속성은 어떻게 작동하나요?

Alt 속성은 이미지의 의미를 인식할 수 있도록 이미지에 대한 대체 정보를 제공합니다. 이 속성은 텍스트만 허용합니다. 이 속성은 태그에서 사용할 수 있습니다:

이 3개의 태그 대체 속성은 이미지 위에 텍스트를 표시하는 데만 사용됩니다.

구문 #1 – 태그

<img src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="text">

구문 #2 – 태그

<img src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="text" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="text">
</map>
<input> tag

구문 #3 – 태그

<input type="image" alt="text">

HTML에 Alt 태그를 구현한 예

다음은 언급된 예입니다.

예시 #1

코드:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: blue;
text-align: center;
}
p {
color: fuchsia;
font-size: 20px;
border: 2px solid red;
}
/*Aligning images side by side*/
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding: 5px;
float: left;
}
.row::after {
clear: both;
display: table;
content: "";
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-img-tag-and-alt-attribute">Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghwm/default1.png" data-src="4.jpg" class="lazy" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghwm/default1.png" data-src="5.jpg" class="lazy" alt="Third Bird"   style="max-width:90%">
</div>
</div>

출력:

이미지 리소스를 사용할 수 있는 경우:

이미지 리소스를 사용할 수 없는 경우:

예시 #2

코드:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-area-tag-and-alt-attribute">Images with area tag and alt attribute</h1>
<img src="/static/imghwm/default1.png" data-src="d2.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTML의 Alt 태그" usemap="#dog">
<map name="dog">
<area shape="rect" coords="0,0,81,125" href="https://www.educba.com/category/software-development/software-development-tutorials/python-tutorial/" alt="Python">
<area shape="circle" coords="91,59,4" href="https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/" alt="Java">
<area shape="circle" coords="125,59,9" href="https://www.educba.com/category/software-development/software-development-tutorials/bootstrap-tutorial/" alt="Bootstrap">
</map>

출력:

이미지 리소스를 사용할 수 있는 경우:

이미지 리소스를 사용할 수 없는 경우:

예시 #3

코드:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
label, input {
color: green;
font-size: 20px;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-input-tag-and-alt-attribute">Images with input tag and alt attribute</h1>

First name:

출력:

이미지 리소스를 사용할 수 있는 경우:

이미지 리소스를 사용할 수 없는 경우:

ê²°ë¡ 

Alt는 Area, img, input 태그에서 사용할 수 있는 속성입니다. 이 alt 속성은 이미지란 무엇인지, 이미지 좌표, 이미지 작성자 등과 같은 이미지에 대한 정보를 제공하는 데 사용됩니다.

위 내용은 HTML의 Alt 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!