기타 인라인 텍스트 요소

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> 태그와 닫는 태그 사이에서 용어를 축약해서 소개할 때 처음 사용할 때 항상 확장된 버전의 용어를 일반 텍스트로 제공하세요. 단, 이 시리즈의 'HTML' 및 'CSS'와 같이 독자에게 잘 알려진 용어가 아니라면 이 첫 번째로 약어 또는 두문자어가 정의될 때만 <abbr>가 필요합니다. title 속성은 필요하지도 유용하지도 않습니다.

약어나 약어가 아닌 용어를 정의하는 경우 정의 <dfn> 요소를 사용하여 주변 콘텐츠 내에 정의되는 용어를 식별합니다.

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

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

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

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

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

텍스트 강조

표현상의 이유가 아닌 텍스트를 강조하는 의미론적 이유에 따라 텍스트를 강조하는 데 사용할 수 있는 요소가 몇 가지 있습니다. CSS의 작업이기 때문입니다.

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

일시적으로 지원 중단되었지만 HTML에 다시 추가된 세 가지 요소가 있습니다. 이러한 속성은 의미론적 값을 거의 또는 전혀 제공하지 않으므로 가급적 사용하지 않는 것이 좋으며, HTML 요소에서 스타일을 지정하는 데는 항상 CSS를 사용해야 합니다.

<i>

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

MLW는 토스트 맥토스트페이스의 워크숍 리뷰 하단에 있는 이상한 텍스트에 <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> 요소는 모두 무효 요소입니다. 즉, 중첩된 요소도 텍스트도 아닌 하위 노드가 있을 수 없습니다. 이러한 콘텐츠에는 콘텐츠를 저장할 수 있는 '내부'가 없으므로 종료 태그가 없습니다.

이해도 테스트

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