기타 인라인 텍스트 요소

bookmark_border 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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을 사용하는 것이 좋습니다.

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

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

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

정의 및 언어 지원

약어나 두문자어를 포함할 때는 처음 사용할 때 항상 일반 텍스트로 된 전체 버전을 제공하세요. 그런 다음 여는 <abbr> 태그와 닫는 <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에 다시 추가된 요소가 3개 있습니다. 의미론적 가치가 거의 없으므로 가능한 한 사용하지 않는 것이 좋습니다. 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은 'horizontal rule'(수평선)의 약자입니다. 브라우저는 일반적으로 가로선을 렌더링하지만 이 요소에는 시맨틱 의미가 있습니다. 기본 역할은 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> 요소는 모두 빈 요소이므로 중첩된 요소나 텍스트와 같은 하위 노드가 있을 수 없습니다. 이러한 요소에는 콘텐츠를 저장할 수 있는 '내부'가 없으므로 종료 태그가 없습니다.

이해도 확인

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