window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster가 이미 존재합니다') } else { w.LeadBooster = { q: [], on: 함수 (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: 함수 (n) { this.q.push({ t: 't', n: n }) }, } } })() 존재조차 몰랐던 유용한 HTML 태그 3가지 - The Codest
The Codest
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 산업 분야
    • 핀테크 및 뱅킹
    • E-commerce
    • 애드테크
    • 헬스 테크
    • 제조
    • 물류
    • 자동차
    • IOT
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
뒤로 화살표 뒤로 가기
2022-10-04
소프트웨어 개발

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

The Codest

야첵 루지크

제품 디자이너

오늘날 접근성(A11y)은 맞춤형 소프트웨어 제품을 구축하는 모든 단계에서 매우 중요합니다. UX/UI 디자인 단계부터 시작하여 코드의 고급 기능 구축 단계에까지 영향을 미칩니다. DX를 높이는 작업을 하는 개발자에게도 많은 이점을 제공하지만, 더 중요한 것은 최종 사용자입니다. HTML의 a11y 부분 중 하나는 시맨틱 태그이며 여기서 다루고자 하는 것이 바로 이 부분입니다.

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

WBR

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

창립 기념일

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

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

WBR 호환성 표

METER

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

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

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

미터 호환성 측정기

DEL 및 INS

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

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

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

관련 문서

소프트웨어 개발

Ruby on Rails(Pub/Sub 포함)에 대해 자세히 알아보기

Pub/Sub는 코드를 깔끔하게 만들고, 서비스를 분리하며, 쉽게 확장할 수 있도록 하는 등 프로젝트에 많은 이점을 가져다줍니다. 다음 문서에서 Pub/Sub에 대해 자세히 알아보세요...

The Codest
마이클 폴락 선임 루비 개발자
소프트웨어 개발

자바스크립트 도구 사용

프로그래밍 게임의 레벨을 높여줄 검색 JavaScript 도구를 알아보세요. ESLint, 프리티어, 허스키에 대해 자세히 알아보세요!

The Codest
레다 살미 React 개발자
소프트웨어 개발

내부 개발자와 외부 개발자 고용하기

내부에서 채용할까요, 아니면 외부에서 채용할까요? 최고의 딜레마입니다! 다음 글에서 outsourcing 또는 사내 팀 구축의 이점을 알아보세요.

The Codest
그레고르즈 로즈무스 자바 유닛 리더
소프트웨어 개발

Java로 프로그래밍할 때 피해야 할 9가지 실수

Java로 프로그래밍할 때 어떤 실수를 피해야 할까요? 다음 글에서 이 질문에 대한 답을 찾아보세요.

The Codest
라팔 사위키 Java 개발자

지식창고를 구독하고 IT 분야의 전문 지식을 최신 상태로 유지하세요.

    회사 소개

    The Codest - 폴란드에 기술 허브를 둔 국제 소프트웨어 개발 회사입니다.

    영국 - 본사

    • 사무실 303B, 182-184 하이 스트리트 노스 E6 2JA
      영국 런던

    폴란드 - 현지 기술 허브

    • 파브리츠나 오피스 파크, 알레야
      포코주 18, 31-564 크라쿠프
    • 뇌 대사관, 콘스트럭터스카
      11, 02-673 바르샤바, 폴란드

      The Codest

    • 홈
    • 회사 소개
    • 서비스
    • Case Studies
    • 방법 알아보기
    • 채용 정보
    • 사전

      서비스

    • IT 자문
    • 소프트웨어 개발
    • 백엔드 개발
    • 프론트엔드 개발
    • Staff Augmentation
    • 백엔드 개발자
    • 클라우드 엔지니어
    • 데이터 엔지니어
    • 기타
    • QA 엔지니어

      리소스

    • 외부 소프트웨어 개발 파트너와의 협력에 대한 사실과 오해
    • 미국에서 유럽으로: 미국 스타트업이 유럽으로 이전을 결정하는 이유
    • 테크 오프쇼어 개발 허브 비교: 테크 오프쇼어 유럽(폴란드), 아세안(필리핀), 유라시아(터키)
    • CTO와 CIO의 주요 과제는 무엇인가요?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • 웹사이트 이용 약관

    저작권 © 2025 by The Codest. 모든 권리 보유.

    ko_KRKorean
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese es_ESSpanish nl_NLDutch etEstonian elGreek ko_KRKorean