특히 원하는 것이 무엇인지 모르는 경우 멋진 HTML 요소를 검색하는 것은 종종 쓰레기 더미에 던져지는 것과 같습니다.



걱정마, 내가 널 위해 더러운 일을 했어!

겉보기에 끝이 없어 보이는 HTML 요소 더미를 뒤진 후, 거의 사용되지 않는 몇 가지 보석을 발견했습니다!

1. 미터와 진행

progress 요소는 진행률 표시줄을 표시하는 의미상 올바른 방법입니다.
meter 요소는 스테로이드의 progress입니다. 알려진 범위 내에서 스칼라 측정을 표시하는 것 외에도 값의 낮음, 높음 및 최적 범위를 지정할 수 있습니다.

<meter
  min="0"
  max="100"
  low="25"
  high="75"
  optimum="80"
  value="50"
></meter>

2. 섭과 서브

x²와 같은 위첨자(예: sup )와 x₀를 사용하는 아래첨자(예: sub )를 문서에 추가할 수 있습니다.

3. 데이터 목록

datalist를 사용하면 input 요소에 자동 완성 제안을 추가할 수 있습니다.

노트

제안은 텍스트inputs로 제한되지 않지만 색상, 날짜, 시간 및 범위 입력에도 사용할 수 있습니다.

제안의 기본 스타일은 최소한 보기에 불쾌합니다. 그러나 CSS를 사용하여 항상 스타일을 지정할 수 있습니다.

4. 지도 및 지역

map 및 area를 사용하면 클릭 가능한 영역이 있는 이미지에 대한 고급 용어인 이미지 맵을 만들 수 있습니다.

<img
  src="workplace.jpg"
  alt="Workplace"
  usemap="#workmap"
  width="400"
  height="379"
/>

<map name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.html"
  />
  <area
    shape="rect"
    coords="290,172,333,250"
    alt="Phone"
    href="phone.html"
  />
  <area
    shape="circle"
    coords="337,300,44"
    alt="Cup of coffee"
    href="coffee.html"
  />
</map>

4. 내용 및 요약

details 및 summary는 JavaScript를 사용하지 않고 접을 수 있는 콘텐츠를 만드는 데 사용됩니다. 드롭다운을 만드는 의미론적 방법입니다.

6. 개체

웹 사이트에 파일을 삽입하기 위해 머리카락을 뽑고 있습니까? 더 이상 보지 마세요!
object를 사용하면 PDF, 이미지, 비디오, 오디오 및 Youtube 비디오와 같은 광범위한 파일을 포함할 수 있습니다.

7. 약어

abbr 요소를 사용하면 문서에 약어를 추가할 수 있습니다. 사용자가 약어 위로 마우스를 가져가면 전체 형식이 표시됩니다. 또한 약어가 나오면 전체 형식을 읽도록 화면 판독기를 구성할 수도 있습니다.



그게 다야! 🎉

참조

W3Schools

MDN

읽어 주셔서 감사합니다

개발 문제를 해결하기 위해 최고 등급의 프런트 엔드 개발 프리랜서가 필요하십니까? Upwork에 저에게 연락하십시오

내가 무엇을 하고 있는지 보고 싶습니까? 내 Personal Website 및 GitHub을 확인하십시오.

연결하시겠습니까? 에 나에게 연락

저는 디지털 노마드이며 가끔 여행을 떠납니다. 나를 팔로우하여 내가 무엇을 하고 있는지 확인하세요.

Weekly new Tidbits를 보려면 내 블로그를 팔로우하세요.

자주하는 질문

다음은 제가 받는 몇 가지 자주 묻는 질문입니다. 따라서 이 FAQ 섹션이 문제를 해결하기를 바랍니다.

저는 초보자입니다. Front-End Web Dev를 어떻게 배워야 합니까?
다음 기사를 살펴보십시오.

나에게 멘토가 되어줄래?
죄송합니다. 저는 이미 많은 업무를 처리하고 있으며 누군가를 멘토링할 시간이 없습니다.