텍스트 편집기에서 <h1>~<h6> 제목을 지정하는 방법과 마찬가지로 HTML에서도 의미 있고 시각적인 방식으로 텍스트 섹션의 서식을 지정할 수 있는 다양한 방법을 제공합니다.
이 섹션에서는 텍스트 또는 텍스트 기본사항을 마크업하는 주요 방법을 설명합니다. 그런 다음 속성을 논의한 후 목록, 표, 양식과 같은 텍스트를 마크업하는 추가적인 방법을 살펴봅니다.
제목, 다시 방문
6개의 섹션 제목 요소 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>가 있으며 <h1>가 가장 중요하고 <h6>가 가장 낮습니다. 수년 동안 개발자는 브라우저에서 문서의 개요를 작성할 때 제목이 사용된다는 말을 들었습니다.
이는 원래 목표였지만 브라우저에서 개요 기능이 구현되지는 않았습니다. 그러나 스크린 리더 사용자는 페이지 콘텐츠에 관해 알아보기 위한 탐색 전략으로 제목을 사용하고 h 키로 제목을 탐색합니다. 따라서 문서의 개요를 작성할 때와 같이 제목 수준을 구현하는 것이 좋습니다. 이렇게 하면 콘텐츠의 접근성이 높아집니다.
기본적으로 브라우저에서는 <h1>를 가장 크게, <h2>은 약간 더 작게 스타일을 지정하며, 이후의 각 제목 수준은 기본적으로 더 작습니다. 흥미롭게도 브라우저는 기본적으로 브라우저가 중첩된 <article>, <aside>, <nav> 또는 <section> 요소 수에 따라 <h1> 글꼴 크기도 줄입니다.
일부 사용자 에이전트 스타일시트에는 중첩된 <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 속성의 영향을 받습니다.
Google에서는 각 인용구 다음에 오는 단락에 인용 정보를 제공했지만, 앞서 표시된 인용문은 외부 출처에서 가져온 것이 아니기 때문에 이러한 방식으로 코딩되었습니다. 만약 그렇다면 출처를 인용할 수 있습니다 (출처를 언급해야 함).
리뷰 웹사이트, 도서 또는 기타 저작물에서 리뷰를 가져온 경우 <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>는 언어에 적합한 따옴표를 추가합니다. 사용자 에이전트 기본 스타일에는 여는 따옴표와 닫는 따옴표 생성 콘텐츠가 포함됩니다.
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> 요소는 인용문 자체가 아니라 인용문의 출처를 나타내는 데 사용됩니다.