텍스트 편집기에서 <h1>~<h6> 제목과 함께 의미 있고 시각적인 방식으로 텍스트 섹션을 서식 지정하는 다양한 방법을 제공하는 것과 마찬가지로 HTML은 산문의 의미를 파악하기 위한 매우 유사한 의미론적 및 비의미론적 요소 집합을 제공합니다.
이 섹션에서는 텍스트 마크업의 주요 방법, 즉 텍스트 기본사항을 다룹니다. 그런 다음 속성에 대해 설명하고 목록, 표, 양식과 같은 텍스트를 마크업하는 추가 방법을 살펴봅니다.
제목 다시 살펴보기
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>의 6가지 섹션 제목 요소가 있으며, <h1>가 가장 중요하고 <h6>가 가장 덜 중요합니다. 수년 동안 개발자들은 브라우저가 문서를 개략적으로 설명하는 데 제목을 사용한다고 들었습니다.
원래는 목표였지만 브라우저에서 문서 개요 기능이 구현되지 않았고 제안된 개요 알고리즘이 HTML 사양에서 공식적으로 삭제되었습니다. 하지만 스크린 리더 사용자는 페이지의 콘텐츠를 파악하기 위한 탐색 전략으로 제목을 많이 사용하며, h 키를 사용하여 제목을 탐색합니다. 문서를 개요로 작성하는 것처럼 제목 수준이 논리적으로 구현되도록 하면 콘텐츠에 액세스할 수 있으며 적극 권장됩니다.
기본적으로 브라우저는 <h1>를 가장 크게, <h2>를 약간 작게 스타일 지정하며 각 후속 제목 수준은 기본적으로 더 작습니다. 이전에는 사용자 에이전트 스타일시트가 <article>, <aside>, <nav>, <section>와 같은 섹션 요소 내에 중첩된 <h1> 요소의 글꼴 크기도 감소시켰습니다.
일부 사용자 에이전트 스타일시트에는 중첩된 <h1> 요소를 하위 제목 수준인 것처럼 스타일을 지정하기 위해 다음 선택기 (또는 유사한 선택기)가 포함되었습니다.
/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
하지만 접근성 객체 모델 (AOM)과 화면 리더는 중첩을 기반으로 제목 수준을 수정하지 않았습니다. 중첩된 <h1>는 항상 '제목, 수준 1'로 보고되었습니다. 이로 인해 중첩된 제목은 시각적으로 더 작게 표시되지만 보조 기술에는 최상위 제목으로 유지되는 불일치가 발생했습니다.
HTML 사양에서 문서 개요 알고리즘을 삭제했기 때문에 브라우저에서 이러한 기존 사용자 에이전트 스타일시트 규칙을 삭제했습니다. 따라서 중첩된 <h1> 요소는 자동으로 축소되지 않고 표준 <h1> 글꼴 크기를 유지합니다.
시각적 스타일 지정이나 구조적 계층 구조를 위해 섹션 요소 내에 <h1> 요소를 중첩하지 마세요. 문서 구조에 따라 순차적 제목 요소 (<h1>~<h6>)를 사용하여 콘텐츠를 항상 마크업하세요. 이렇게 하면 검색엔진, 스크린 리더, 향후 유지관리자가 콘텐츠를 명확하게 파악하고 액세스할 수 있습니다.
제목을 제외한 대부분의 구조화된 텍스트는 일련의 단락으로 구성됩니다. HTML에서 단락은 <p> 태그로 표시됩니다. 종료 태그는 선택사항이지만 항상 권장됩니다.
#about 섹션에는 제목과 몇 개의 단락이 있습니다.
이 섹션에는 액세스 가능한 이름이 없으므로 랜드마크가 아닙니다. 이를 랜드마크 역할인 region로 변환하려면 aria-labelledby를 사용하여 액세스 가능한 이름을 제공하면 됩니다.
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
적절한 경우에만 랜드마크를 만드세요. 랜드마크가 너무 많으면 스크린 리더 사용자가 혼란스러워질 수 있습니다.
인용 및 출처
기사나 블로그 게시물을 마크업할 때 인용문이나 풀 쿼트를 포함할 수 있으며, 인용을 표시할 수도 있고 표시하지 않을 수도 있습니다.
이러한 세 가지 구성요소에는 <blockquote>, <q>, <cite>(표시되는 인용) 또는 cite 속성(검색에 대한 추가 정보 제공)이 있습니다.
#feedback 섹션에는 헤더와 세 개의 리뷰가 포함되어 있습니다. 이러한 리뷰는 인용 부호가 포함된 블록 인용문이며, 그 뒤에는 인용문의 출처가 포함된 단락이 나옵니다. 공간을 절약하기 위해 세 번째 리뷰를 생략하면 마크업은 다음과 같습니다.
인용구 작성자 또는 인용에 관한 정보는 인용구의 일부가 아니므로 <blockquote>에 포함되지 않지만 인용구 뒤에 나옵니다.
이러한 인용은 일반적인 의미의 인용이지만 실제로 특정 리소스를 인용하는 것은 아니므로 <p> 단락 요소로 캡슐화됩니다.
인용문은 작성자 이름, 이전 역할, 전문 분야 포부를 포함하여 세 줄에 걸쳐 표시됩니다. <br> 줄바꿈은 텍스트 블록에 줄바꿈을 만듭니다. 물리적 주소, 시, 서명 블록에 사용할 수 있습니다. 줄바꿈은 문단을 구분하는 캐리지 리턴으로 사용하면 안 됩니다. 대신 이전 단락을 닫고 새 단락을 엽니다. 단락에 단락을 사용하면 접근성이 향상될 뿐만 아니라 스타일을 지정할 수 있습니다. <br> 요소는 줄바꿈일 뿐이며, 극히 일부 CSS 속성의 영향을 받습니다.
각 블록 인용문 뒤에 인용 정보를 제공했지만, 앞서 표시된 인용문은 외부 소스에서 가져온 것이 아니므로 이와 같이 코딩되었습니다. 인용된 경우 출처를 인용할 수 있습니다.
리뷰가 리뷰 웹사이트, 책 또는 기타 저작물에서 가져온 경우 <cite> 요소를 소스의 제목에 사용할 수 있습니다. <cite>의 콘텐츠는 책 제목, 웹사이트 또는 TV 프로그램 이름, 컴퓨터 프로그램 이름일 수 있습니다. <cite> 캡슐화는 소스가 지나가는 말로 언급되든 소스가 인용되거나 참조되든 사용할 수 있습니다. <cite>의 콘텐츠는 저자가 아닌 작품입니다.
Blendan Smooth의 인용구가 오프라인 잡지에서 가져온 경우 다음과 같이 블록 인용구를 작성합니다.
인용 요소 <cite>에는 암시적 역할이 없으며 콘텐츠에서 액세스 가능한 이름을 가져와야 합니다. aria-label를 포함하지 마세요.
콘텐츠를 표시할 수 없는 경우 출처를 표시하기 위해 인용된 정보의 소스 문서 또는 메시지의 URL을 값으로 사용하는 cite 속성이 있습니다. 이 속성은 <q> 및 <blockquote> 모두에서 유효합니다. URL이지만 기기에서 읽을 수 있고 독자에게는 표시되지 않습니다.
</p> 종료 태그는 선택사항이지만 (항상 권장됨) </blockquote> 종료 태그는 항상 필수입니다.
대부분의 브라우저는 <blockquote> 인라인 방향에 패딩을 추가하고 <cite> 콘텐츠를 기울임체로 표시합니다. 이는 CSS로 제어할 수 있습니다. <blockquote>는 따옴표를 추가하지 않지만 CSS 생성 콘텐츠를 사용하여 추가할 수 있습니다. <q> 요소는 언어에 적합한 따옴표를 사용하여 기본적으로 따옴표를 추가합니다.
#teachers 섹션에서 HAL은 "
인라인 인용 요소인 <q>는 언어에 적합한 따옴표를 추가합니다. 사용자 에이전트 기본 스타일에는 여는 따옴표와 닫는 따옴표 생성 콘텐츠가 포함됩니다.
q::before {content: open-quote;}
q::after {content: close-quote;}
lang 속성은 페이지의 기본 언어가 <html lang="en-US"> 여는 태그에서 영어로 정의되었지만 이 텍스트 단락은 다른 언어로 되어 있음을 브라우저에 알리기 위해 포함됩니다. 이를 통해 Siri, Alexa, VoiceOver와 같은 음성 제어 기능에서 프랑스어 발음을 사용할 수 있습니다. 또한 브라우저에 렌더링할 따옴표 유형을 알려줍니다.
<blockquote>와 마찬가지로 <q> 요소는 cite 속성을 지원합니다.
HTML 개체
이스케이프 시퀀스 또는 '엔티티'를 확인했을 수 있습니다. <는 HTML에서 사용되므로 < 또는 기억하기 어려운 인코딩 <를 사용하여 이스케이프해야 합니다. HTML에는 <, >, &, "의 4가지 예약된 항목이 있습니다. 문자 참조는 각각 <, >, &, "입니다.
자주 사용되는 다른 엔티티로는 저작권 (©)을 나타내는 ©, 상표 (™)를 나타내는 ™, 공백이 끊어지지 않음을 나타내는 이 있습니다.
줄바꿈 방지 공백은 두 문자 또는 단어 사이에 공백을 포함하면서 해당 위치에서 줄바꿈이 발생하지 않도록 하려는 경우에 유용합니다.
2,000개가 넘는 이름이 지정된 문자 참조가 있습니다.
하지만 필요한 경우 그림 이모티콘을 포함한 모든 단일 문자에는 &#로 시작하는 인코딩된 동등한 문자가 있습니다.
ToastyMcToastface의 워크숍 리뷰를 살펴보면 (위의 코드 샘플에는 포함되지 않음) 몇 가지 특이한 텍스트 문자가 있습니다.
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>
이 블록 인용의 마지막 문장은 다음과 같이 작성할 수도 있습니다.
This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇
이 코드에는 이스케이프되지 않은 문자와 명명된 문자 참조가 몇 개 있습니다. 문자 집합이 UTF-8이므로 이 예와 같이 블록 인용의 마지막 몇 문자를 실제로 이스케이프할 필요는 없습니다. 문자 집합에서 지원하지 않는 문자만 이스케이프하면 됩니다. 필요한 경우 다양한 문자를 이스케이프할 수 있는 여러 도구가 있으며 <head>에 <meta charset="UTF-8">를 포함하면 됩니다.
문자 집합을 UTF-8로 지정한 경우에도 해당 문자를 화면에 출력하려면 <을 이스케이프해야 합니다.
일반적으로 >, " 또는 &의 이름이 지정된 문자 참조를 포함할 필요는 없지만 HTML 엔티티에 관한 튜토리얼을 작성하려면 < 코딩 방법을 알려줄 때 <를 작성해야 합니다. 😀
아, 그리고 스마일 이모티콘은 😀이지만 이 문서는 UTF-8로 선언되어 있으므로 이스케이프되지 않습니다.
이해도 테스트
HTML의 텍스트에 대한 지식을 테스트합니다.
HTML에서 저작권 기호를 어떻게 표시하나요?
c©©right.인용임을 나타내는 데 사용되는 요소는 무엇인가요?
<blockquote><quote><cite><cite> 요소는 인용문 자체가 아닌 인용문의 출처를 나타내는 데 사용됩니다.