기타 인라인 텍스트 요소

HTML 요소의 대부분을 다루었지만, 모든 요소를 다룬 것은 아닙니다. 다루지 않은 한 가지 영역은 인라인 텍스트 요소입니다. 일반적인 생각과는 달리 HTML은 원래 고양이 동영상이 아닌 문서를 공유하기 위한 것이었습니다. 문서에 텍스트 시맨틱을 제공하는 요소는 많습니다.

링크와 <a> 요소를 다루는 모듈이 있습니다. 나머지 요소는 여기에서 간략하게 설명합니다.

코드 예시 및 기술 문서 작성

코드 예시를 문서화할 때는 <code> 요소를 사용합니다. 기본적으로 텍스트 콘텐츠는 고정폭 글꼴로 표시됩니다. 여러 줄의 코드를 포함할 때는 미리 서식이 지정된 텍스트를 나타내는 <pre> 요소 내에 <code>를 중첩합니다.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

<data> 요소 는 지정된 콘텐츠를 머신 리더블 번역과 연결합니다. 요소의 value 속성은 요소 콘텐츠의 머신 리더블 번역을 제공합니다. <data> 콘텐츠가 시간 또는 날짜와 관련된 경우 특정 기간을 나타내는 <time> 요소를 대신 사용해야 합니다.

<time> 요소는 datetime 속성을 포함하여 머신 리더블 형식으로 사람이 읽을 수 있는 시간과 날짜를 제공할 수 있습니다. datetime 속성은 머신 리더블이며 캘린더 및 검색엔진과 같은 애플리케이션에 유용한 정보를 제공합니다.

프로그램에서 샘플 출력을 제공할 때는 <samp> 요소를 사용하여 텍스트를 묶습니다. 브라우저는 일반적으로 이 샘플 또는 인용된 출력을 고정폭 글꼴로 렌더링합니다.

키보드 상호작용과 함께 안내를 제공할 때는 <kbd> 요소 를 사용할 수 있습니다. 키보드, 음성 입력 또는 기타 텍스트 입력 기기의 텍스트 사용자 입력을 나타냅니다.

<var> 요소 는 수학 표현식 또는 프로그래밍 변수에 사용할 수 있습니다. 대부분의 브라우저는 주변 글꼴의 기울임꼴 버전으로 텍스트 콘텐츠를 표시합니다. 수학을 많이 작성하는 경우 수학 표기법을 설명하기 위한 XML 기반 수학 마크업 언어인 MathML을 사용하는 것이 좋습니다.

피타고라스 정리의 2의 거듭제곱은 <sup> 위 첨자 요소를 사용했습니다. 유사한 <sub> 아래 첨자 요소는 순전히 서체상의 이유로 아래 첨자로 표시해야 하는 인라인 텍스트를 지정합니다. 위 첨자와 아래 첨자는 일반적인 유형의 줄보다 작은 숫자, 그림, 기호 또는 기타 주석이며 각각 줄 위 또는 아래에 약간 설정됩니다.

<del>을 사용하여 삭제된 텍스트를 나타냅니다. 선택적으로 변경사항을 설명하는 리소스로 설정된 cite와 머신 리더블 날짜 및 시간 형식의 날짜 또는 날짜 및 시간이 포함된 datetime 속성을 포함합니다. 취소선 요소인 <s>, 콘텐츠가 더 이상 관련이 없지만 문서에서 실제로 삭제되지 않았음을 나타내는 데 사용할 수 있습니다.

<ins>는 <del> 요소의 반대입니다. 이 요소는 추가되거나 '삽입'된 텍스트를 나타내는 데 사용되며 선택적으로 cite 또는 datetime 속성을 포함합니다.

정의 및 언어 지원

약어 또는 두문자어를 포함할 때는 항상 처음 사용할 때 용어의 전체 버전을 일반 텍스트로 제공합니다. 그런 다음 여는 태그와 닫는 <abbr> 태그 사이에 용어의 축약된 표현을 도입합니다. 약어 또는 두문자어가 정의되는 이 첫 번째 발생에서만 <abbr>이 필요합니다. title 속성은 필요하지도 유용하지도 않습니다.

이 규칙의 예외는 이 시리즈의 HTML 및 CSS 와 같이 독자에게 잘 알려진 용어인 경우입니다.

약어 또는 두문자어가 아닌 용어를 정의할 때는 정의 <dfn> 요소를 사용하여 주변 콘텐츠 내에서 정의되는 용어를 식별합니다.

정의되는 용어가 주변 텍스트와 동일한 언어가 아닌 경우, lang 속성을 포함하여 언어를 식별해야 합니다.

HTML은 방향이 다른 언어를 작성할 때 주변 텍스트와 격리된 잠재적으로 양방향 텍스트를 처리하기 위한 <bdi> 요소를 제공합니다. 이 국제화 요소는 방향성을 알 수 없는 콘텐츠가 페이지에 동적으로 삽입될 때 특히 유용합니다. <bdo> 요소는 텍스트의 현재 방향성을 재정의하여 텍스트를 다른 방향으로 렌더링합니다. W3C는 양방향 알고리즘에 대한 소개를 제공합니다.

일부 문자 집합에는 발음에 관한 정보를 제공하기 위해 문자 위 또는 오른쪽에 배치된 작은 주석이 포함되어 있습니다. <ruby> 요소 는 한국어, 중국어, 일본어와 같은 서면 언어 를 더 쉽게 읽을 수 있도록 하는 이러한 주석을 포함하는 데 사용할 컨테이너입니다. 루비는 히브리어, 아랍어, 베트남어에도 사용할 수 있습니다.

루비 괄호 (<rp>) 는 표시를 지원하지 않는 브라우저의 여는 괄호와 닫는 괄호를 포함하기 위해 사양에 포함되었습니다.<ruby> 모든 에버그린 브라우저가 지원하는 <ruby>를 브라우저가 지원하면 <rp> 요소의 콘텐츠가 표시되지 않습니다. 루비 텍스트 요소 (<rt>)에는 실제 주석이 포함되어 있습니다. 이 두 가지 모두 <ruby> 내에 중첩되어 있습니다.

브라우저가 <ruby>를 지원하는 경우 괄호가 표시되지 않습니다.

텍스트 강조

텍스트를 강조하는 시맨틱 이유에 따라 텍스트를 강조하는 데 사용할 수 있는 요소가 여러 개 있습니다 (표시상의 이유가 아닌 경우, 이는 CSS의 작업임).

• <em> 요소를 사용하여 콘텐츠 범위를 강조하거나 강조합니다. <em> 요소는 중첩될 수 있으며 각 중첩 수준은 더 큰 강조 정도를 나타냅니다. 이 요소는 시맨틱 의미를 가지며 스크린 리더, Alexa, Siri와 같은 청각 사용자 에이전트에게 강조를 제공하도록 알리는 데 사용할 수 있습니다.
• <mark> 요소를 사용하여 검색 결과에서 검색어의 발생을 강조표시 (또는 "표시")하는 것과 같이 관련성이 있는 텍스트 를 식별하거나 강조표시합니다. 이렇게 하면 강조 또는 중요도를 추가하지 않고도 표시된 콘텐츠를 빠르게 식별할 수 있습니다.
• <strong> 요소는 텍스트가 매우 중요함을 식별합니다. 브라우저는 일반적으로 더 굵은 글꼴 가중치로 콘텐츠를 렌더링합니다.
• <cite> 요소는 텍스트 기본사항에서 다룬 것으로, 책, 기사 또는 기타 창작물의 제목이나 책의 ISBN 번호와 같은 약어 참조 또는 인용 메타데이터를 표시하는 데 사용됩니다.

일시적으로 지원 중단되었지만 HTML에 다시 추가된 세 가지 요소가 있습니다. 시맨틱 값이 거의 또는 전혀 제공되지 않으므로 이러한 요소는 거의 사용하지 않아야 하며 HTML 요소에 스타일을 지정할 때는 항상 CSS를 사용해야 합니다.

<i>

<i> 요소는 기술 용어, 외국어 (언어를 식별하는 lang 속성 포함), 생각 또는 선박 이름에 사용할 수 있습니다. 이 요소는 관용적 텍스트, 기술 용어, 분류학적 지정과 같은 특정 이유로 인라인 콘텐츠를 주변 텍스트와 구분하는 데 사용됩니다.

이 요소는 텍스트를 기울임꼴로 만드는 데 사용해서는 안 됩니다.

MLW는 Toasty McToastface의 워크숍 리뷰 하단에 있는 이상한 텍스트에 <span> 요소를 사용합니다. <span> 요소는 시맨틱이 없고 아무것도 나타내지 않는 일반적인 인라인 컨테이너를 제공합니다. 이것은 <i>를 적절하게 사용한 것이기도 합니다.

<i> 요소의 기본 스타일은 요소를 기울임꼴 글꼴로 렌더링하는 것입니다. 이 예에서는 사용된 문자를 기울임꼴로 사용할 수 없으므로 font-style: normal을 설정합니다.

<u>

<u> 요소는 텍스트가 아닌 주석이 있는 콘텐츠용입니다. 예를 들어 의도적으로 철자가 틀린 단어에 주석을 달 수 있습니다. 기본적으로 콘텐츠는 밑줄이 그어져 있지만 워드 프로세서 문법 오류 표시기를 모방하기 위해 빨간색 물결 모양 밑줄을 추가하는 것과 같이 CSS로 제어할 수 있습니다.

<p>I always spell <u>licence</u> wrong</p>

<b>

<b> 요소는 그렇지 않으면 중요하지 않은 텍스트에 주의를 끌기 위해 사용할 수 있습니다. 이 요소는 특별한 시맨틱 정보를 전달하지 않으며 이 섹션의 다른 요소가 목적에 맞지 않는 경우에만 사용해야 합니다. 유효한 사용 사례를 생각해 낼 수 없었으므로 예시가 제공되지 않습니다. 이 요소가 '최후의 수단'인 이유입니다.

공백

시나 물리적 주소를 작성할 때와 같이 줄 바꿈을 원하는 경우 자동 닫기 줄 바꿈 요소인 <br>을 사용하여 캐리지 리턴을 추가합니다.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

책의 장 사이 또는 사용자가 실제로 찾고 있는 5,000단어 독백과 레시피 사이와 같이 접선 콘텐츠 섹션 간에 구분 기호 또는 주제별 구분 기호를 제공하려면 <hr> 요소를 포함합니다. HR은 '가로 규칙'을 나타냅니다. 브라우저는 일반적으로 가로선을 렌더링하지만 이 요소에는 시맨틱 의미가 있습니다. 기본 역할은 separator입니다.

HTML에는 단어를 끊을 수 있는 요소도 있습니다. 자동 닫기 <wbr> 요소는 단어가 컨테이너를 오버플로할 수 있는 경우 브라우저가 선택적으로 줄을 바꿀 수 있는 지점이라는 제안을 브라우저 에 제공합니다. 일반적으로 긴 URL 내에서 단어 사이를 끊는 데 사용됩니다. 하이픈을 추가하지 않습니다.

예를 들어 Hal 전기에는 각 바이트가 공백으로 구분된 바이트 코드로 작성된 텍스트가 있습니다. 바이트 코드에는 공백이 없습니다. 줄을 래핑해야 하는 경우 바이트 코드의 긴 문자열이 바이트 사이에서만 끊어지도록 하려면 각 끊기 기회에 <wbr> 요소를 포함합니다.

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

<br>, <hr>, <wbr> 요소는 모두 빈 요소입니다. 즉, 중첩된 요소나 텍스트와 같은 하위 노드를 가질 수 없습니다. 이러한 요소에는 콘텐츠를 저장할 수 있는 '내부'가 없으므로 종료 태그가 없습니다.

이해도 테스트

인라인 텍스트에 관한 지식을 테스트합니다.