우리는 대부분의 HTML 요소를 다루었지만 모든 요소를 다루지는 않았습니다. 여기서 다루지 않은 한 가지 영역은 인라인 텍스트 요소입니다.
일반적인 믿음과는 달리 HTML은 원래 고양이 동영상이 아니라 문서를 공유하기 위한 것이었습니다. 많은 요소가
텍스트 시맨틱스를 제공합니다 링크와 <a> 요소를 다루는 모듈이 있습니다. 이 나머지 부분은
요소에 대해서는 여기서 간단히 다루겠습니다.
코드 예시 및 기술 작성
코드 예를 문서화할 때는 <code> 요소를 사용하세요. 작성자:
기본적으로 텍스트 콘텐츠는 고정폭 글꼴로 표시됩니다. 여러 줄의 코드를 포함하는 경우 <code>를
미리 형식이 지정된 텍스트를 나타내는 <pre> 요소입니다.
<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> 아래 첨자 요소가
오직 인쇄상의 이유로 아래 첨자로 표시되어야 하는 인라인 텍스트입니다. 위 첨자와 아래 첨자는 숫자이고,
일반 유형의 선보다 작고 선 약간 위 또는 아래에 설정된 그림, 기호 또는 기타 주석
각각 1개의 값으로 사용합니다.
<del>를 사용하여 삭제되었거나 '삭제됨' 텍스트를 표시할 수 있습니다.
필요한 경우 다음을 설명하는 리소스로 설정된 cite를 포함합니다.
datetime 속성을
컴퓨터가 인식할 수 있는 날짜 및 시간 형식으로 된 날짜 또는 날짜 및 시간 취소선 요소 <s>
는 콘텐츠가 더 이상 관련이 없지만 문서에서 실제로 삭제되지는 않았음을 나타내는 데 사용할 수 있습니다.
<ins>은 <del> 요소의 반대입니다. 사용됩니다
는 추가된 텍스트, 즉 '삽입된' 텍스트를 나타내며 선택적으로 cite 또는 datetime 속성을 포함합니다.
정의 및 언어 지원
약어나 두문자어를 포함할 때는 처음 사용할 때 항상 일반 텍스트로 된 용어의 전체 확장 버전을 제공하세요.
열기 및 닫기 <abbr> 사이의 용어를 단축하여 도입할 때
태그; 단, 'HTML'과 같이 독자에게 잘 알려진 경우는 예외입니다. 및 'CSS' 이 시리즈의 다른 동영상도
살펴보겠습니다 이 첫 번째 이벤트에서만
약어 또는 두문자어가 정의될 때는 <abbr>가 필요합니다. title 속성은 필요하지 않거나 유용하지 않습니다.
약어나 두문자어가 아닌 용어를 정의하려면 <dfn>의 정의를 사용하세요.
요소를 사용하여 관련 콘텐츠 내에서 정의되고 있는 용어를 식별합니다.
정의되는 용어가 주변 텍스트와 다른 언어로 되어 있지 않으면 lang를 포함해야 합니다.
속성을 사용하여 언어를 식별합니다.
다양한 방향의 언어를 작성할 때 HTML은 <bdi>를 제공합니다.
요소를 사용하여 주변 텍스트와는 별개로 양방향 텍스트를 처리할 수 있습니다. 이러한 국제화는
요소는 방향을 알 수 없는 콘텐츠가 페이지에 동적으로 삽입될 때 특히 유용합니다. 이
<bdo> 요소는 텍스트의 현재 방향보다 우선 적용됩니다.
다른 방향으로 텍스트를 렌더링할 수 있습니다. W3C는 양방향 알고리즘을 소개합니다.
일부 문자 집합에는 정보를 제공하기 위해 문자 위나 오른쪽에 배치되는 작은 주석이 포함됩니다.
도움이 될 수 있습니다. <ruby> 요소는 다음과 같은 컨테이너입니다.
을 사용하여 한국어, 중국어, 일본어와 같은 언어의 가독성을 높이는 이러한 주석을 포함시킵니다. 루비
히브리어, 아랍어 및 베트남어에도 사용할 수 있습니다.
루비 괄호 (<rp>)는
를 사용하지 않는 브라우저에는 여는 괄호와 닫는 괄호가 포함되어 있습니다.
<ruby> 표시를 지원합니다. 브라우저에서 모든 상시 브라우저가 지원하는 <ruby>를 지원하는 경우 모든 <rp> 요소의 콘텐츠는
표시되지 않습니다. 루비 텍스트 요소 (<rt>)에는
확인해 보겠습니다. 둘 다 <ruby> 내에 중첩되어 있습니다.
브라우저에서 <ruby>를 지원하는 경우 괄호가 표시되지 않습니다.
텍스트 강조
텍스트를 강조하는 대신 텍스트를 강조하는 의미론적 이유에 따라 텍스트를 강조하는 데 사용할 수 있는 이는 CSS의 작업이므로 표시상의 이유).
<em>요소를 사용하여 콘텐츠 범위를 강조하거나 강조할 수 있습니다.<em>요소는 중첩될 수 있으며 각 수준의 중첩은 강조되는 정도가 높아집니다. 이 요소에는 스크린 리더, Alexa, Siri와 같은 청각 사용자 에이전트에 강조하는 데 사용될 수 있습니다.<mark>요소를 사용하여 텍스트를 식별하거나 강조 표시하기 관련성 있는 정보를 제공합니다. 이렇게 하면 강조하거나 중요도를 더하지 않고 빠르게 식별할 수 있습니다.<strong>요소는 텍스트의 강세를 나타냅니다. 중요도가 높습니다. 브라우저는 일반적으로 콘텐츠를 더 두꺼운 글꼴 두께로 렌더링합니다.<cite>요소(텍스트 기본사항에서 다룸) 도서, 기사 또는 기타 창작물의 제목이나 이에 대한 축약 참조 또는 인용 메타데이터를 표시하는 데 사용됨 책 ISBN 번호처럼 말이죠.
일시적으로 지원 중단되었지만 HTML에 다시 추가된 요소가 세 가지 있습니다. 드물게 사용해야 합니다. 은 의미론적 값을 거의 또는 전혀 제공하지 않으며 CSS는 항상 HTML 요소 위에 스타일을 지정하는 데 사용되어야 합니다.
<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>
접선 콘텐츠의 섹션(예: 책의 장 사이 또는
<hr>를 포함해 5,000단어 독백 단어와 사용자가 실제로 찾고 있는 레시피 사이에 추가할 수 있습니다.
요소가 포함됩니다. HR은 '수평 법칙'의 약자입니다. 브라우저는 일반적으로 가로선을 렌더링하지만, 이 요소는 의미론적 의미를 지닙니다. 이
기본 role은 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> 요소는 모두 무효 요소입니다. 즉, 하위 노드를 가질 수 없으며 중첩할 수도 없습니다.
요소가 없습니다. 이 중 어느 것도 '내부'를 콘텐츠가 저장될 수 있는 곳에는 종료 태그가 없습니다.
이해도 확인
인라인 텍스트에 관한 지식을 테스트합니다.
코드 샘플을 표시하려면 어떤 요소를 사용해야 하나요?
<code><data><kbd><ruby> 요소의 용도는 무엇인가요?