존재조차 몰랐던 유용한 HTML 태그 3가지

프런트엔드 개발자는 다음 사항을 잘 알고 있어야 합니다. HTML 태그 매일 자연스러운 환경이기 때문입니다. 여러분 모두 다음과 같은 몇 가지 기본 태그를 알고 있을 것입니다. , , 등을 사용할 수 있습니다. 하지만 예를 들어 다음과 같은 단어만 사용하여 단어 휴식 시간을 제안할 수 있다는 사실을 알고 계셨나요? HTML를 CSS 없이 사용하시나요?

WBR

독일 고객을 위한 웹사이트나 앱 작업을 하고 있다고 가정해 봅시다. 아시다시피 독일어 단어는 정말 길 수 있습니다. 따라서 다음과 같은 텍스트 콘텐츠가 포함된 디자인을 재현해야 합니다. 코드 이 콘텐츠는 매우 특정한 순간에 깨져야 합니다. 여기에 태그가 도움이 됩니다.

창립 기념일

끝입니다! 이렇게 간단한 태그를 사용하면 원하는 대로 텍스트 내용을 조작할 수 있습니다.

그렇다면 브라우저 지원은 어떨까요? 솔직히 말해서 꽤 괜찮습니다. 대부분의 브라우저는 이 태그를 이해하지만 Android의 Opera와 iOS의 Safari에는 문제가 있을 수 있습니다.

METER

디스크 스토리지 관리자 앱을 구축한다고 가정해 보겠습니다. 아직 사용 가능한 스토리지의 양을 UI에 표시해야 하며, 가능한 한 쉽게 액세스할 수 있도록 만들고 싶을 것입니다. 이는 다음과 같은 완벽한 사용 사례입니다. <미터 태그를 추가합니다. 정의된 범위 내의 값만 표시합니다. 이 태그의 또 다른 멋진 점은 속성이라는 점입니다:

• 낮음 → 현재 값이 설정된 낮음 값보다 낮으면 미터의 막대가 빨간색으로 바뀝니다;
• 최적 → 현재 값이 최적 속성 값보다 높으면 미터의 막대가 녹색으로 바뀝니다;
• 높음 → 높음 값이 최대값보다 낮고 최적값보다 높으면 미터의 막대가 주황색으로 표시됩니다. 그렇지 않으면 녹색으로 표시됩니다.

비슷한 태그인 진행률도 알고 계실 것입니다. 그렇다면 실제로 이 둘의 차이점은 무엇일까요? 진행률 태그는 진행 중인 작업에 사용해야 합니다. 즉, 특정 작업을 처리할 때 진행률 태그를 사용하세요. 미터 태그는 디스크 또는 메모리 사용량을 표시하는 데 사용해야 합니다. 또 다른 차이점은 미터 태그는 IE에서 지원되지 않는다는 점이며 실제로 이 태그의 유일한 단점입니다.

DEL 및 INS

콘텐츠의 삭제 및 추가된 부분에 대한 액세스 가능한 표시기를 만드는 방법이 궁금하신가요(티켓이 업데이트되었을 때 GitHub 또는 Jira의 이메일 알림에서 달라짐)? 삭제된 콘텐츠는 삭제된 콘텐츠를태그를 추가합니다. 예를 들어 <del><p>방금 삭제한 콘텐츠</p></del>. 콘텐츠에서 추가된 부분만 표시하려면<ins> 태그와 똑같은 방식으로 사용할 수 있습니다. 이 태그는 두 가지 속성도 제공합니다:

• 인용 → 이 부분이 추가된 이유를 설명하는 리소스의 URL을 추가합니다;
• 날짜/시간 → 변경된 데이터 및 시간으로 변경합니다.

물론 훨씬 더 유용한 태그 . 가능하면 모두 사용할 것을 적극 권장합니다. 고객과 앱 사용자는 이러한 접근 방식에 감사할 것입니다. 하지만 일부 태그는 더 이상 사용되지 않을 수 있으므로 주의하세요. 사용하려는 덜 일반적인 태그가 여전히 유효하고 다음에서 잘 지원되는지 언제든지 확인할 수 있습니다. MDN 문서.