텍스트 편집기에서 <h1>에 <h6> 제목을 제공하는 방식과 비슷하며, 텍스트 섹션의 서식을 지정하는 다양한 방법도 함께 제공합니다.
의미적이고 시각적인 방식으로, HTML은 산문의 의미를 만들기 위해 매우 유사한 의미론적 요소와 비의미론적 요소 집합을 제공합니다.
이 섹션에서는 텍스트 또는 텍스트 기본사항을 마크업하는 주요 방법을 다룹니다. 그런 다음 특성을 살펴보기 전에 텍스트를 마크업하는 추가적인 방법(예: 목록, 표 및 양식)
제목, 재검토됨
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 등 6개의 섹션 제목 요소가 있으며 <h1>가 가장 중요합니다.
그리고 <h6>이 가장 적게 나타납니다. 수년 동안 개발자들은 브라우저에서 문서의 개요를 작성하는 데 제목을 사용한다는 말을 들어왔습니다.
이는 원래 목표였지만 브라우저에서는 개요 기능을 구현하지 않았습니다. 하지만 스크린 리더 사용자는
h 키로 제목을 탐색하여 페이지의 콘텐츠를 알아보기 위한 탐색 전략입니다. 따라서
제목 수준이 구현되어 있으므로 문서의 개요처럼 콘텐츠에 액세스할 수 있으며 여전히 적극 권장됩니다.
기본적으로 브라우저에서는 <h1>을 가장 크게, <h2>을 약간 더 작게 스타일링하며 이후의 각 제목 수준은 더 작아집니다.
기본적으로 제공됩니다 흥미롭게도 브라우저는 기본적으로 <h1> 글꼴 크기를 줄입니다. <article>, <aside>, <nav> 또는
중첩된 요소가 <section>개 있습니다.
일부 사용자 에이전트 스타일시트에는 중첩된 <h1> 요소에 있는 것처럼 스타일을 지정하기 위해 다음과 같은 선택기가 포함되어 있습니다.
덜 중요한 수준인
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
하지만 접근성 객체 모델(AOM)은 여전히 요소의 수준을 정확하게 보고합니다. 여기에서는 'heading, level 1'입니다 브라우저는 다른 제목 수준에 대해서는 이 작업을 실행하지 않습니다. 제목 수준 기반 브라우저 스타일 지정은 사용하지 마세요. 하지만 브라우저는 윤곽선을 지원하지 않고 지원하는 척하는 것처럼 가장합니다. 콘텐츠 제목을 마크업하는 것이 좋습니다. 이렇게 하면 검색엔진, 스크린 리더, 미래 유지보수 담당자 (여러분)가 될 수 있습니다.
제목 외에 대부분의 구조화된 텍스트는 일련의 단락으로 구성됩니다. 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 섹션에는 헤더와 리뷰 3개가 포함되어 있습니다. 리뷰는 인용구가 되는데, 일부는 인용구가 되는데
그 뒤에 인용문이 포함된 단락이 표시됩니다. 공간을 절약하기 위해 세 번째 리뷰를 생략할 경우 마크업은 다음과 같습니다.
인용문 작성자 또는 인용에 대한 정보는 인용문에 포함되지 않으므로 <blockquote>에 표시되지 않고 인용문 뒤에 표시됩니다.
용어의 일반적인 의미에서 인용하지만 실제로는 특정 리소스를 인용하지 않으므로 <p> 단락 요소에 캡슐화됩니다.
인용은 저자 이름, 이전 역할, 직업적 포부를 포함하여 세 줄에 걸쳐 표시됩니다. <br> 줄바꿈
는 텍스트 블록에 줄바꿈을 만듭니다. 실제 주소, 시, 서명 블록에서 사용할 수 있습니다. 선
줄바꿈을 별도의 단락에 대한 캐리지 리턴으로 사용해서는 안 됩니다. 대신 이전 단락을 닫고 새 단락을 엽니다. 단락 사용
는 접근성에도 좋을 뿐만 아니라 스타일 지정에도 도움이 됩니다. <br> 요소는 줄바꿈일 뿐입니다. 극소수의 CSS 속성의 영향을 받습니다.
각 인용구 뒤에 나오는 단락에는 인용 정보를 제공했지만, 앞에서 표시된 인용문은 외부 소스에서 비롯된 것입니다 출처가 표시되는 경우 출처를 인용할 수 있습니다 (있어야 할까요?).
리뷰를 리뷰 웹사이트나 도서, 기타 저작물에서 가져온 경우 제목에 <cite> 요소를 사용할 수 있습니다.
소스일 수 있습니다 <cite>의 콘텐츠는 도서 제목, 웹사이트 또는 TV 프로그램 이름, 도서 이름 등이 될 수 있습니다.
사용할 수 있습니다. <cite> 캡슐화는 소스가 전달 중이든 또는 소스가 언급되는지와 상관없이 사용할 수 있습니다.
견적이나 참조가 있는가를 확인할 수 있습니다. <cite>의 콘텐츠는 저자가 아니라 저작물입니다.
Blendan Smooth의 인용문을 오프라인 잡지에서 가져온 경우 인용구를 다음과 같이 작성할 수 있습니다.
인용 요소 <cite>에는 암시적 역할이 없으며 콘텐츠에서 액세스 가능한 이름을 가져와야 합니다. aria-label는 포함하지 않습니다.
콘텐츠를 표시할 수 없을 때 크레딧을 제공해야 하는 경우 cite 속성이 있습니다. 이 속성은 인용된 정보에 대한 소스 문서 또는 메시지의 URL을 값으로 사용합니다. 이 속성은 <q> 및 <blockquote>에서 모두 유효합니다. URL이지만 컴퓨터에서 읽을 수 있지만 독자에게는 표시되지 않습니다.
</p> 닫는 태그는 선택사항이며 항상 권장되는 반면, </blockquote> 닫는 태그는 항상 필수입니다.
대부분의 브라우저는 <blockquote> 인라인 방향 모두에 패딩을 추가하고 <cite> 콘텐츠를 기울임꼴로 표시합니다. CSS로 제어할 수 있습니다. <blockquote>는 따옴표를 추가하지 않지만 CSS 생성 콘텐츠와 함께 추가할 수 있습니다. <q> 요소는 기본적으로 언어에 적합한 따옴표를 사용하여 따옴표를 추가합니다.
#teachers 섹션에서 HAL은 '죄송합니다.
인라인 인용 요소 <q>는 언어에 적합한 따옴표를 추가합니다. user-agent 기본 스타일에는 여는 따옴표와 닫는 따옴표로 묶인 콘텐츠가 포함됩니다.
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개의 예약된 항목이 있습니다. 문자 참조는 각각 <, >, &, "입니다.
자주 사용하게 될 몇 가지 기타 요소로는 © 저작권 (©),™ 상표 (TM), 줄바꿈 없는 공백 등이 있습니다.
줄바꿈이 발생하지 않도록 하면서 두 문자 또는 단어 사이에 공백을 포함시키려는 경우에 줄바꿈 없는 공백이 유용합니다.
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> 요소는 인용 자체가 아니라 인용문의 출처를 나타내는 데 사용됩니다.