6 당신이 모르는 HTML 태그

소개(건너뛸 수 있음)

며칠 전 나는 책상에서 일하고 있었고 내 옆에는 내가 진짜로 하는 일에 관심이 있는 사랑스러운 여자 친구가 있었습니다. 그녀는 내가 IT를 하고 있다는 것을 이미 알고 있고 내가 때때로 코드를 작성한다는 것도 알고 있습니다. 그녀는 코드 작성을 좋아하는지 어떻게 이해할 수 있는지 물었습니다. 나는 내가 해야 할 일을 했다. 나는 그녀에게 웹 사이트 코드가 어떻게 작동하는지 설명하고 몇 개의 비디오를 보여주고 그녀를 위해 w3schools을 열었습니다. HTML 섹션으로 이동하여 Visual Studio Code이 켜진 상태에서 Live Server을 열었습니다. 그리고 그녀는 시작했습니다.

나는 거의 알지 못했습니다. 그녀는 몇 시간 안에 나보다 더 많은 HTML 태그를 알게 될 것입니다. 그때 HTML이 실제로 내가 상상했던 것보다 훨씬 더 유연하다는 것을 깨달았습니다.

포스트 구조

이 게시물의 구성은 다음과 같습니다.

HTML 태그 이름

태그 설명

사용 예

W3Schools 페이지 링크

준비가 된? 의 시작하자!

(제 생각에는) 가장 흥미롭고 유용한 것부터 시작하겠습니다.

지도

< map > 태그는 이미지를 매핑하는 데 사용됩니다. 즉, 이미지의 영역을 정의하고 상호 작용할 때 다른 결과를 설정할 수 있습니다. 예를 들어 이미지를 매핑하고 2개의 영역을 가질 수 있습니다. 영역 1을 클릭하면 Google로 이동하고 영역 2를 클릭하면 Twitter로 이동합니다.

통사론

<img src="https://asciiden.com/assets/img/profile-img.jpg" usemap="#map-name">

<map name="map-name">
    <area target="_blank" alt="ALT_TEXT" title="TITLE_TEXT" href="https://example.com" coords="93,57,305,169" shape="rect">
    <area target="" alt="ALT_TEXT" title="TITLE_TEXT" href="https://example.com" coords="144,248,253,278" shape="rect">
</map>

W3Schools Link

팁

this website을 사용하여 이미지 맵을 자동으로 생성할 수 있습니다!

그림

< picture > 태그는 태그와 유사하게 사용되지만 개발자에게 더 많은 유연성을 제공합니다. 다른 소스에서 다른 뷰포트를 정의할 수 있으므로 CSS 없이 다른 화면에 다른 이미지를 표시할 수 있습니다.

통사론

<picture>
  <source media="(max-width: <WIDTH>px)" srcset="someimage.jpg">
  <source media="(min-width: <WIDTH>px)" srcset="someimage.jpg">
  <img src="DEFAULT_IMAGE" style="width:auto;">
</picture>

W3Schools Link

저녁을 먹다

< sup > 태그는 텍스트를 조금 더 높게 들어 올립니다. 위첨자 텍스트를 나타냅니다.

통사론

<sup> supscripted text </sup>

W3Schools Link

보결

< sub > 태그는 텍스트를 낮춥니다. 아래 첨자 텍스트를 나타냅니다.

통사론

<sub> subscripted text </sub>

W3Schools Link

BDO

< bdo > 태그는 텍스트 방향을 선택하는 데 사용됩니다. 현재 방향을 재정의할 수 있습니다.

통사론

<bdo dir="ltr"> text from left to right </bdo>
<bdo dir="rtl"> text from right to left </bdo>

W3Schools Link

DL

< dl > 태그는 HTML에서 사용할 수 있는 또 하나의 목록인 '설명 목록'을 정의합니다. 목록 항목을 오른쪽으로 약간 밀어서 설명하는 느낌을 줍니다.

통사론:

<dl>
<dt>Item title</dt>
<dd>Item description</dd>
</dl>

W3Schools Link

저자 소개

저는 온라인에서 ASCIIden을 사용하는 Dennis이고 DevOps 엔지니어입니다. 그러나 나는 'DevOps'라는 제목이 마음에 들지 않습니다. 나는 오히려 나 자신을 미래학자이자 기술 애호가라고 생각합니다.

저는 현재 약 2년 동안 IT를 하고 있습니다. 저는 업계의 모든 후배들에게 도움의 손길이 되기 위해 노력하고 있으며 여러분 모두가 즐길 수 있는 좋고 이해하기 쉬운(재미까지!) 콘텐츠를 제공하기 위해 최선을 다하고 있습니다.

프로젝트를 위해 저에게 연락하고 싶거나 그냥 인사하고 싶다면 제