의미 HTML 작성, 당신이 무엇을 모르더라도: 진도 vs 미터

유사한 점이 있습니다110 unique tags in HTML5.가장 기억하기 쉬운 리스트가 아니에요. 그렇죠?(설령 나에게 있어서 나도 HTML5 원소주기율표를 표시하는 그런 사람이다.)
그렇다면 당신이 무엇을 사용할 수 있는지조차 모를 때 어떤 것을 사용해야 하는지desktop wallpaper를 어떻게 알 수 있습니까?우리들은 진실한 예를 하나 봅시다.

의미 요소 구성 요소 요구 사항 정의

내가 일하는 디자인팀은 최근 React에서 새로운 Figma 구성 요소를 발표했다.내가 보기엔 쉬워!

나는 신속하게 수요를 열거하는 것부터 시작한다.다음과 같은 구성 요소가 있어야 합니다.

href

을 통과하면 링크처럼 작업 가능

현재 사용 상황을 표시하는 상태 표시줄, 내가 보기에는 <progress>원소

와 비슷하다

숫자value 및 max 한계

서로 다른 단위(예를 들어 화폐, 파일 크기 등)를 처리하는 능력

서스펜션 및 초점 상태 포함 솔리드 모델과 일치하는 스타일

"제 표기가 일반 영어에서 의미가 있습니까?"

수요를 이해하면 구성 요소를 코드로 바꾸는 데 도움을 줄 수 있다.
링크 및 상태 표시줄 REQ에 다음과 같은 세 줄 태그가 표시됩니다.

<a href="http://leslie.dev">
   <progress value="218" max="400">54%</progress>
</a>

왜 사용합니까<progress>?첫째, 나는 그것의 존재를 알고 있기 때문이다. 둘째, <progress>의 기본 양식은 내가 얻은 디자인 모델과 거의 똑같아 보이기 때문이다.
내가 새로운 HTML을 작성할 때, 나는 자신에게 물었다. "이런 표기는 일반 영어에서 의미가 있습니까?"어쨌든 이것은 단어의 의미 의미의 본질이다.'단어의 의미에 대한 정확한 해석'(출처:.대다수 상황에서 우리는'번역'을 이해할 수 있는 문장으로 표시할 수 있어야 한다.
그래서 "218달러를 사용하는 것은 400달러의 예산으로 발전하는 것이다."
별로 안 맞죠?이것을'금전적 사용'이라고 부르지'금전적 진보'가 아니라 더욱 의의가 있을 수 있다
일반 영어에서 표기를 바꾸면 의미의 차이를 더욱 뚜렷하게 하는 데 도움을 줄 수 있다.검사dictionary.com에서도 몇 가지 선명도를 제공합니다.

The HTML <progress> element displays an indicator showing the completion progress of a task

우리는 이곳에서 임무의 완성 진도를 절대 표시하지 않았다.사건 종결!우리는 이 구성 요소를 사용해서는 안 된다<progress>.

DN 문서 문서 따르기

그렇다면 우리는 어떤 원소로 대체해야 합니까?
다행히도 MDN은 힌트를 잘 제공합니다.만약 우리가 <progress>에 관한 문서를 계속 읽는다면, 우리는 아래에서 관련 <meter> 요소를 언급한 주석을 볼 수 있을 것이다.

The HTML <meter> element represents either a scalar value within a known range or a fractional value

이전 Netlify 디자이너the "Attributes" heading의 유행어🛎️ 정!
우리가 전달하고자 하는 것은 218달러가 최고 400달러의 예산에 쓰인다는 것이다.이것이 바로 우리가 원하는 원소다!

라파 공드 언어 환경에서 끊임없이 공부하다

만약 최종 표시에서 단어를 바꾸기 위해서 우리가 많은 일을 해야 할 것 같다면, 너는 틀리지 않을 것이다.

<a href="http://leslie.dev">
   <meter value="218" max="400">$218/$400</meter>
</a>

그렇다면 왜 최선을 다해야 하는가?
응, 뻔한 외에 적당한 의미 요소를 사용하면 무료로 우리에게 더 많은 기능을 제공할 수 있다.
이런 상황에서 <meter> 특수한 속성이 있지만 <progress> 없다.min및max과 함께<meter>,low및high도 지원됩니다.이 속성들은 측정 범위의 경계를 지정할 수 있으며, 사용자 정의 스타일에 사용할 위조 클래스에 연결할 수도 있습니다.
이것은 우리가 값에 따라 상태 표시줄의 색깔을 제어할 수 있다는 것을 의미한다.
따라서 현재 우리는 하한선에 녹색, 최적 또는 예상 범위 내에서 파란색, 예산 한계에 가까울 때 노란색으로 스타일을 설정할 수 있다.

<a href="http://leslie.dev">
   <meter value="370" max="400" high="300" optimum="200">
      $370/$400
   </meter>
</a>

accessibility wins
CSS 기술은 더 많은 것을 제공합니다.
만약 당신이 이 특정 구성 요소를 모델에 맞게 어떻게 설계하는지에 관심이 있다면, 평론에서 저에게 알려주십시오. 아니면 제가 후속 보고서를 작성할 수도 있습니다. (교란판: 선택적 원각을 optimum의 다른 상태에 적용하는 것은 여행입니다!)

요소 스타일에 대한 프롬프트 설정 TLDR: 의미 문제

새 태그를 작성할 때:

"내 표기가 일반 영어에서 의미가 있습니까?"일반 영어에서 표기를 바꾸면 의미의 차이를 더욱 뚜렷하게 하는 데 도움을 줄 수 있다.

사용 여부를 확인하기 위해 MDN 문서 읽기

베이킹 기능 무료 이용