중요한 HTML 태그(1부) 👨🏻‍💻

글쎄, 당신이 여기에서 이 기사를 읽고 있다면 그것은 아마도 당신이 웹 개발에 가장 관심이 있다는 것을 의미합니다. 그렇다면 완벽한 웹 페이지에 도착했다고 말씀드리겠습니다! 👨🏻‍💻

HTML이란 무엇이며 왜 필요한가요?

HTML은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. HTML을 사용하여 웹 페이지의 구조를 정의할 수 있습니다.

이 기사에서는 마을의 모든 새로운 개발자가 알아야 할 5가지 중요한 HTML 태그를 다룰 것입니다. 곧이어 다섯 개의 다른 태그를 다시 다룰 것입니다.

⚠️(업데이트)⚠️- PART TWO가 있습니다.

1️⃣ HTML <그림> 태그

HTML<picture> 태그는 하나의 <img> 태그와 하나 이상의 <source> 태그를 포함할 수 있습니다.

<picture>
    <img src="example.jpg" alt="logo">
    <source srcset="large_img.jpg" media="(min-width: 1024px)">
    <source srcset="small_img.jpg" media="(min-width: 512px)">
</picture>

이 태그는 개발자가 다양한 화면 크기 시나리오에 대한 이미지를 표시하는 데 도움이 됩니다. 뷰포트가 더 작은 작은 화면에 대체 이미지 버전을 표시합니다.

태그는 뷰포트와 일치하는 요소가 없고 브라우저에서 지원하지 않는 경우 대체 옵션으로 사용됩니다.

2️⃣ HTML <동영상> 태그

이 HTML 태그를 사용하면 비디오 재생을 위한 미디어 플레이어를 내장할 수 있습니다.

<video autoplay="" loop="" controls="" width="640" height="480">
    <source type="video/mp4" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    <p>Have fun watching the video!</p>
</video>

먼저 원하는 플랫폼에 동영상을 업로드해야 합니다.
<video> 태그 내에서 자동 재생, 루프, 컨트롤, 높이 및 너비와 같은 특정 속성을 지정할 수 있습니다.

3️⃣ HTML <진행> 태그

이 HTML 태그는 작업의 완료 진행률을 나타내며 "진행률 표시줄"이라는 이름으로 알 수 있습니다.

<progress value="55" max="100"></progress>

태그와 혼동하지 않는 것이 중요합니다. <meter> 태그는 알려진 범위 내의 스칼라 값을 나타냅니다.

4️⃣ HTML <미터> 태그

위에서 설명한 것처럼 태그는 알려진 범위 내에서 데이터를 측정하는 데 사용됩니다. 이는 최소값과 최대값 또는 백분율을 사용하여 달성할 수 있습니다.

<!-- Measure data within a given range -->
<meter value="4" min="0" max="10">4 / 10</meter>
<!-- This also can be achieved with min and max values or with % -->
<meter value="0.2">20%</meter>

5️⃣ HTML <지도> 태그

이 HTML 태그를 사용하면 이미지 맵(클릭 가능한 링크 영역이 있는 이미지)을 정의할 수 있습니다.

해야 할 일은 <map> 태그 내의 요소에서 X 및 Y 좌표를 정의하는 것입니다.

<img src="countries.png" width="600" height="400" alt="Countries" usemap="#countries">

<map name="countriesmap">
    <area shape="circle" coords="15,52,92" href="romania.html" alt="Romania">
    <area shape="circle" coords="60,48,5" href="italy.html" alt="Italy">
    <area shape="circle" coords="135,48,12" href="israel.html" alt="Israel">
</map>