HTML 그림 태그

프런트 엔드 개발자는 HTML 그림 태그를 사용하여 뷰포트와 같은 기본 설정에 따라 웹 페이지에 표시할 두 개 이상의 파일 소스를 지정합니다. 이 태그를 사용하면 반응형 웹 페이지의 웹 개발자가 다중 이미지 소스를 지정하고 뷰포트에 따라 자동으로 이미지를 선택할 수 있으므로 웹 페이지가 소스로 완벽하게 채워집니다. 사진 태그에 여러 소스를 지정할 수 있으며 웹 페이지는 기본 설정을 충족하는 이미지를 로드합니다. 그림 태그는 HTML 5에서 도입되었습니다.

구문:

HTML의 그림 태그에는 두 가지 유형의 태그가 포함되어 있습니다. 첫 번째 유형은 파일 소스를 지정할 수 있으며 두 번째는 브라우저가 를 지원하지 않는 경우 표시할 이미지를 지정할 수 있는 태그입니다. 꼬리표. 태그는 아래와 같습니다

<picture>
<source .>
.
.
<source .>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png?x-oss-process=image/resize,p_40" class="lazy" . alt="HTML 그림 태그" >
</source></source></picture>

사진 태그에는 앞서 언급한 것처럼 항상 두 가지 유형의 태그가 포함된 닫는 태그가 있습니다. 태그는 리소스 수에 따라 여러 번 나타나며 꼬리표. 소스 태그와 이미지 태그에는 사진 태그의 기능을 결정하는 다양한 속성이 있습니다.

HTML 그림 태그의 속성

언급한 대로 그림 태그에는 다른 두 개의 태그 그리고 . 이 두 태그에 적용 가능한 속성이 그림 태그에 적용됩니다.

1. 소스

이 속성은 꼬리표. 이 속성을 사용하면 표시할 이미지의 경로나 URL을 지정할 수 있습니다. 이 필드는 필수이며 소스 태그가 사용될 때마다 지정해야 합니다. 이러한 방식으로 이미지에 대한 여러 소스를 지정할 수 있습니다.

2. 소스세트

이 속성은 또는 태그는 HTML 5의 새로운 기능입니다. 이 속성은 이전의 "src" 속성과 유사하지만 더 많은 값을 정의할 수 있습니다. 이 속성은 두 가지 값을 입력으로 사용합니다. 첫 번째는 파일의 경로 또는 URL이고 두 번째는 (100w)와 같은 이미지의 너비 설명자 또는 (3x)와 같은 이미지의 픽셀 밀도 설명자입니다. 각 뒤에는 각각 w와 x가 옵니다.

3. 미디어

이 속성은 꼬리표. 이 태그를 사용하면 이미지가 표시되는 규칙을 정의할 수 있습니다. 이 속성은 모든 미디어 쿼리를 입력으로 사용하고 규칙을 적용합니다. 미디어 쿼리는 뷰포트나 장치 크기, 높이 등을 확인할 수 있습니다.

이러한 방식으로 태그와 함께 이 속성과 태그를 사용하여 반응형 디자인을 얻을 수 있습니다. 태그.

4. 사이즈

이 속성은 그리고 태그. 이미지는 기본 너비로 표시되므로 이 속성을 사용하면 미디어 조건에 따라 이미지 너비를 명시적으로 지정할 수 있습니다. 미디어 조건은 추가 매개변수 없이 “max-width: 800px”와 같은 간단한 조건입니다. 그림 태그에는 앞서 언급한 것처럼 항상 두 가지 유형의 태그가 포함된 닫는 태그가 있습니다. 태그는 리소스 수에 따라 여러 번 나타나며 꼬리표. 소스 태그와 이미지 태그에는 그림 태그의 기능을 결정하는 다양한 속성이 있습니다. 크기 속성은 이와 같은 두 개 이상의 미디어 조건을 허용할 수 있습니다. 이는 조건을 설정하고 이에 따라 이미지를 표시할 수 있는 반응형 웹 디자인에 매우 유용합니다.

5. 유형

이 속성은 꼬리표. 이 속성을 사용하면 표시할 파일의 MIME 유형을 명시적으로 지정할 수 있습니다.

HTML 그림 태그의 예

HTML은 웹 개발자가 이미지 리소스를 정의할 수 있는 유연성을 제공하는 데 사용됩니다. 다음은 HTML 사진 태그의 예입니다.

예시 #1

코드:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="picture-tag-in-HTML"> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 그림 태그"   style="max-width:90%">
</source></source></picture>
</div>
</div>

출력:

여기에는 해상도가 다른 세 개의 이미지가 있습니다.

코드에서는 이미지를 표시하기 위해 최소 너비 미디어 쿼리를 지정했습니다. 코드를 실행한 후 브라우저 크기를 조정해 보세요. 너비에 따라 다른 이미지가 표시됩니다.

너비가 550px보다 큰 경우:

너비가 465픽셀보다 큰 경우:

기타 경우, 즉 너비가 465px 미만인 경우:

Note, the outer border of the images clarifies the resolution of images. In most of the cases, all these images will be the same but with different resolutions.

Example #2

Code:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
.img {
max-width: 100%;
}
</style>


<div class="results">
<h2 id="picture-tag-in-HTML"> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 그림 태그" srcset="https://cdn.educba.com/HTML 그림 태그.png 2000w" sizes="900vw"   style="max-width:90%">
</source></source></picture>
</div>
</div>

Output:

Here, we have used the attribute size with the tag. The maximum width of an image is limited by using CSS first, but these sizes attribute, along with srcset, forces to use the width depending on the size specified in terms of the viewport.

Conclusion

Web developers use HTML picture tag in responsive web page designing. This tag consists of two child tags source and img. Using different attributes available for these tags makes it possible to display images dynamically depending on the conditions.

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