텍스트 요소

docs.scrimba.com

방문자가 페이지에서 읽는 대부분의 내용은 일반 텍스트입니다. 제목, 단락, 굵은 경고, 인용문, 코드 조각 등이 그것입니다. HTML은 이러한 각 역할을 위한 특정 요소를 가지고 있으며, 올바른 요소를 선택하는 것은 텍스트의 모양만 바꾸는 것 이상입니다. 브라우저, 검색 엔진, 보조 기술에 각 텍스트가 실제로 무엇인지를 알려줍니다.

제목과 계층 구조

HTML은 <h1>부터 <h6>까지 6가지 크기의 **제목**을 제공합니다. 제목은 페이지 또는 페이지의 일부에 대한 제목입니다. <h1>은 맨 위의 큰 제목입니다. <h2>는 주요 섹션에, <h3>은 그 안의 소규모 섹션에, <h6>까지 이렇게 사용됩니다.

인쇄된 책을 생각해보세요. 표지의 제목이 <h1>입니다. 각 장의 제목은 <h2>입니다. 장 내의 제목은 <h3>입니다. 무엇이 무엇에 속하는지 보여주기 위해 레벨을 사용합니다.

처음부터 기억해야 할 한 가지: 제목을 원하는 크기 때문에 선택하지 마세요. <h1>은 크게 보일 수 있지만, 그 역할은 "이것이 주요 제목이다"를 말하는 것이지, "이것을 크게 만들어라"가 아닙니다. 어딘가에 큰 텍스트를 원한다면, 그것은 나중에 CSS의 일입니다.

6개의 제목 요소인 <h1>부터 <h6>까지는 문서의 **계층 구조**를 설명합니다. 어떤 부분이 섹션이고 어떤 부분이 소규모 섹션인지를 보여줍니다. 숫자는 크기가 아니라 순위입니다. <h1>은 개요의 최상위, <h2>는 그 아래, <h3>은 그 아래입니다.

초반에 구축할 규칙은 순서대로 중첩하고 레벨을 건너뛰지 않는 것입니다. <h2>로 된 섹션은 <h3> 소규모 섹션을 포함해야 하며, 바로 <h4>로 건너뛰면 안 됩니다. 더 작은 기본 크기에 도달하기 위해 레벨을 건너뛰는 것은 전형적인 실수이며, 그것은 잘못된 도구입니다. 제목이 특정 방식으로 보이길 원한다면 CSS로 스타일을 지정하고, 번호를 구조에서의 순위로 예약하세요.

제목 요소는 문서의 **개요**를 정의합니다. 목차가 주제를 주제 아래에 중첩하는 방식과 동일하게 섹션의 순서가 있는 등급 구조입니다. 이로부터 세 가지 프로덕션 규칙이 따르며, 이 세 가지 모두 외관이 아니라 접근성과 검색에 관한 것입니다.

첫째, 페이지당 하나의 <h1>을 사용하세요. 이것이 해당 페이지 콘텐츠의 진정한 제목입니다. 개요의 최상위이며, 정확히 하나를 가지면 모든 도구에 페이지가 무엇에 관한 것인지에 대한 단일 명확한 앵커를 제공합니다.

둘째, 내려갈 때 레벨을 건너뛰지 마세요. 스크린 리더(볼 수 없는 사람들을 위해 페이지를 큰 소리로 읽어주는 소프트웨어)는 사용자가 모든 제목 목록을 끌어올리고 그 사이를 이동할 수 있게 해줍니다. 이는 보는 독자가 원하는 섹션을 훑어보는 방식입니다. <h2>에서 <h4>로의 점프는 목록의 누락된 레벨로 읽히며, 네비게이션이 더 이상 의미가 없습니다.

셋째, 순위는 의미론적이며, 크기가 아닙니다. 검색 엔진은 제목 구조를 읽어 페이지가 어떻게 구성되어 있는지 이해하므로, 실제로 3단계 섹션이 아니라 기본 크기가 올바르게 보였기 때문에 선택한 <h3>은 조용히 크롤러와 스크린 리더 모두에 잘못된 정보를 제공합니다. CSS에서 크기를 설정하세요. 번호가 의미를 전달하도록 하세요.

<h1>초보자를 위한 사워도우</h1>

<h2>스타터 준비</h2>
<p>스타터는 밀가루와 물의 살아있는 배양입니다.</p>

<h3>1일차부터 3일차</h3>
<p>같은 무게의 밀가루와 물을 섞은 다음 기다리세요.</p>

<h2>첫 번째 빵 구우기</h2>
<p>스타터가 활성화되면 구울 준비가 된 것입니다.</p>

하나의 <h1>이 전체 페이지를 이름 지으며, 두 개의 <h2> 제목이 주요 섹션을 표시하고, <h3>이 첫 번째 섹션 내에 깔끔하게 들어맞습니다. 제목 번호만 읽으면 본문 단어 하나를 읽지 않고도 기사의 형태를 볼 수 있습니다.

Juno제목과 계층 구조 6개의 제목이 있습니다. <h1>부터 <h6>까지, <h1>은 최상단의 하나의 주요 제목입니다. 나머지는 섹션과 소규모 섹션에 레이블을 붙입니다. 초반에 나를 걸렸던 함정: 제목이 크게 보인다고 해서 방금 제목을 잡지 마세요. 그것은 CSS의 역할입니다. 숫자는 그것이 무엇인지에 관한 것이지, 크기가 아닙니다.

Juno제목과 계층 구조 제목은 콘텐츠를 순위 매기지만 크기를 지정하지 않습니다. 순서대로 중첩하고 더 작은 기본값을 얻기 위해 레벨을 건너뛰지 마세요. 이것이 사람들을 걸려 넘게 하는 것입니다. 제목이 특정 방식으로 보이길 원하세요? CSS에서 스타일을 지정하고 구조를 설명하는 번호를 두세요.

Juno제목과 계층 구조 페이지당 하나의 <h1>, 내려갈 때 건너뛴 레벨이 없음, 그리고 순위를 크기로 절대 선택하지 마세요. 스크린 리더 사용자는 제목 사이를 목차처럼 점프하고, 검색 엔진도 같은 개요를 읽으므로 모습을 선택한 제목은 둘 다에 잘못된 정보를 줍니다. 번호를 의미론적으로 유지하고 CSS에 모양을 넣으세요.

단락과 줄 바꿈

일반 텍스트 블록은 **단락**인 <p> 요소에 들어갑니다. 각 단락을 자신의 <p>...</p>로 감싸면 브라우저가 그 위아래에 약간의 공간을 제공하여, 단락이 책처럼 떨어져 앉습니다.

<p>빵에는 4가지가 필요합니다: 밀가루, 물, 소금, 시간.</p>
<p>이것들을 올바르게 하면 나머지는 인내입니다.</p>

HTML 파일에서 Enter를 누르는 것이 페이지에 아무것도 하지 않는 것을 주목하세요. 브라우저는 입력한 줄 바꿈과 추가 공간을 무시하며, 태그만 신경 씁니다. 이것이 단락을 구분하기 위해 <p>가 필요하며, 단순히 다른 줄에 입력하면 안 되는 이유입니다.

단락 내에서 주소 줄이나 짧은 시처럼 정말 줄을 바꿔야 한다면, <br> 요소가 있습니다. 그것은 하나의 줄 바꿈과 다른 것은 없습니다.

<p> 요소는 흐르는 텍스트의 단락을 보유하며, 본문 콘텐츠의 기본 홈입니다. 브라우저는 소스의 공간, 탭, 줄 바꿈의 실행을 단일 공간으로 축소하므로, 페이지의 텍스트 레이아웃은 파일 형식이 아니라 태그에서 옵니다.

<br> 요소는 텍스트 블록 내에서 줄 바꿈을 강제합니다. 닫는 태그가 없는 void 요소이며, 바꿈이 콘텐츠 자체의 일부일 때만 올바릅니다. 주소, 시 줄, 서명 블록입니다.

<p>
  김민준<br>
  14 Orchard Lane<br>
  Bristol BS1 4TR
</p>

<br>이 틀린 곳은 간격 도구입니다. 두 단락을 밀어내기 위해 <br><br>을 쌓는 것은 좋아 보이지만 잘못된 직관입니다. 이것들은 두 단락이므로 두 개의 <p> 요소이며, 그 사이의 간격은 CSS에 속하는 표현입니다. 간격을 만들기 위해 <br>에 도달하는 것은 구조와 스타일을 혼합하는 것이며, 초반에 끊을 가치가 있는 정확한 습관입니다.

<p>는 블록 레벨 요소이며, 이는 새 줄에서 시작하고 사용 가능한 전체 너비를 사용하며, 주변 단락과 수직으로 쌓인다는 의미입니다. 그것은 산문의 실행을 위한 올바른 컨테이너이며, 브라우저는 공백 축소를 콘텐츠에 적용합니다. 소스의 공간, 탭, 줄 바꿈의 모든 수열은 렌더링된 출력에서 하나의 공간이 됩니다. 이것이 소스 형식이 읽을 수 있는 것이면 무엇이든 자유로운 이유입니다.

<br>은 레이아웃 간격이 아니라 콘텐츠에 의미가 있는 줄 바꿈을 나타냅니다. 구별은 구체적인 접근성 비용을 가집니다. 스크린 리더는 <p> 경계를 단락의 끝으로 취급하고 그에 따라 일시 중지하여, 사용자에게 한 생각이 끝나고 다음이 시작되는 위치의 감각을 제공합니다. <br> 요소의 스택은 그러한 경계를 생성하지 않습니다. 소프트웨어는 계속 읽고, 보는 독자가 간격에서 본 구조는 청취자에게 보이지 않습니다. 스페이서로 사용된 빈 단락도 같은 문제를 가지고 있습니다. 일부 스크린 리더는 그들을 공백으로 공지하고, 다른 것은 그들을 건너뛰고, 어느 쪽이든 의도한 간격이 전달되지 않습니다.

접촉으로 생존하는 규칙: <br>은 바꿈이 데이터의 일부일 때만 (주소, 구절, 형식 레이블의 줄), 그리고 블록 사이의 수직 간격은 항상 margin을 사용하는 CSS입니다. 구조가 의미를 전달합니다. 스타일은 모양을 전달하며, 그것들을 떨어뜨리는 것이 페이지를 유지 가능하고 접근 가능하게 하는 것입니다.

Juno단락과 줄 바꿈 각 텍스트 블록은 자신의 <p>...</p>에 들어가며, 이것이 단락 사이에 공간을 넣는 것입니다. 브라우저는 입력한 Enter와 공간을 무시하므로 태그가 작동합니다. 주소처럼 줄이 정말 단락 중간에 깨져야 할 때만 <br>을 사용하세요.

Juno단락과 줄 바꿈<p>는 단락이고, 브라우저는 소스 공백을 축소하므로 파일 형식이 페이지를 변경하지 않습니다. <br>은 주소처럼 콘텐츠에 속하는 깨짐을 위한 것이지, 절대 물건을 떨어뜨리기 위한 것이 아닙니다. 두 <br>을 간격을 만들기 위해 사용하는 것은 간격이 CSS에서 샌 신호입니다.

Juno단락과 줄 바꿈<p>는 스크린 리더가 일시 중지할 실제 단락 경계를 제공합니다. <br> 스택은 그것을 제공하지 않으며 구조는 청취자에게 사라집니다. 그래서 <br>은 바꿈이 데이터의 일부일 때만, 그리고 모든 수직 간격은 margin을 사용하는 CSS입니다. 스페이서로 사용된 빈 단락도 같은 접근성 구멍을 가지고 있으므로, 그것도 건너뛰세요.

강조: <strong>과 <b>, <em>과 <i>

2개의 요소가 텍스트를 굵게 만들고, 2개가 기울임을 만듭니다. <strong>과 <b> 모두 굵게 렌더링되고, <em>과 <i> 모두 기울임으로 렌더링됩니다. 그래서 4개의 태그, 2개의 모습입니다.

<p><strong>경고:</strong> 오븐이 매우 뜨겁습니다.</p>
<p>반죽을 <em>철저히</em>치대야 합니다.</p>

지금 당장, 경고처럼 텍스트가 중요할 때는 **<strong>**에 도달하고, 큰 목소리로 읽는다면 목소리처럼 단어를 강조하려는 경우 <em>을 도달하세요. 이것들이 대부분의 경우 원할 두 개이고, 브라우저가 그것들을 굵게 기울임으로 만듭니다.

4개의 요소는 2개의 쌍으로 나뉘며, 나누어진 것은 의미와 모양 사이입니다. <strong>과 <em>은 의미론적입니다. 텍스트에 대해 뭔가를 말합니다. <b>와 <i>는 표현적입니다. 모양만 변경합니다.

콘텐츠가 중요도, 심각성, 또는 긴급도를 지닐 때 <strong>을 사용하세요. 경고, 중요 지시사항 같은 경우입니다. 강조, 문장을 큰 목소리로 읽는다면 기울일 단어에 <em>을 사용하세요. 이것은 의미를 변경할 수 있습니다. 둘 다 각각 굵게 기울임으로 렌더링되지만, 의미있는 것에 대해 선택하고 있습니다.

<b>와 <i>는 굵게 또는 기울임을 원하지만 그 뒤에 중요도나 스트레스가 없는 경우입니다. 눈을 그리는 키워드에 <b>, 배의 이름이나 외국 구절에 <i>. 그들은 텍스트를 양식으로 집합된 것으로 표시하지 않고, 더 중요하다고 주장하지 않습니다.

<p><strong>하지 마세요</strong> 시스템이 가압된 상태에서 밸브를 열지 마세요.</p>
<p>그녀가 그것이 <em>자신</em>의 생각이라고 속삭였으며, 그의 것이 아닙니다.</p>
<p>키보드 단축키는 <b>Ctrl</b>과 <b>S</b>입니다.</p>
<p>우리는 <i>Lady Marion</i>을 건너 페리로 건넜습니다.</p>

한 가지만 기억한다면: <strong>과 <em>은 의미가 있고, <b>와 <i>는 단지 보여줄 뿐입니다. 텍스트가 정말 중요할 때, 의미론적 쌍에 도달하세요.

모든 4개는 브라우저가 기본적으로 렌더링하는 동일한 두 가지 방식입니다. 굵게 또는 기울임으로, 화면에서는 서로 바꿀 수 있습니다. 차이는 픽셀을 보지 않는 모든 것에 전달하는 것이며, 그것이 선택이 실제로 살아가는 곳입니다.

<strong>은 중요도를 표시합니다. 심각하거나, 긴급하거나, 놓칠 수 없는 콘텐츠입니다. <em>은 강조 스트레스를 표시합니다. 문장의 의미를 변경하는 단어입니다("내일 나에게 전화해"와 "내일 나에게 전화해"를 비교합니다). 스크린 리더가 이것에 행동할 수 있습니다. 많은 사람들이 강조된 텍스트에서 톤이나 속도를 이동시킬 것이고, <strong>은 일반 산문과 다르게 표면화될 수 있으므로, 인코딩한 중요도는 실제로 보이지 않는 누군가에게 전달됩니다. 정도에 대해 중첩: <strong> 내 <strong>은 더 큰 중요도로 읽고, <em> 내 <em>은 더 무거운 스트레스로 읽습니다.

<b>와 <i>는 표현적 쌍이며, "그것들을 피하라"는 조언보다 더 자주 올바른 선택입니다. 그들의 실제 정의는 좁습니다. <b>는 추가 중요도 없이 실질적 이유로 텍스트에 주의를 그립니다. 요약의 키워드, 검토의 제품 이름입니다. <i>는 대체 목소리 또는 분위기에서 텍스트를 표시합니다. 기술 용어의 첫 사용, Homo sapiens와 같은 분류학적 이름, 다른 언어의 구절, 캐릭터의 내적 생각입니다. 더 구체적인 요소(<cite>는 작품의 제목, <dfn>은 정의, <code>는 코드)가 있을 때, 그것을 대신 사용하세요. <b>와 <i>는 텍스트가 집합되지만 더 강한 의미가 적용되지 않을 때의 폴백입니다.

회피할 실패 모드는 <strong>을 의도했을 때 <b>를 사용하거나, <em>을 의도했을 때 <i>를 사용하는 것입니다. 그들은 동일하게 보이므로 화면에서 뭔가 잘못되었다고 알려주는 것이 없지만, 보조 기술이 의존하는 중요도 또는 강조를 버렸습니다. 텍스트가 어떻게 보이는지가 아니라 의미하는 것이 무엇인지 물어보세요. 중요하면 <strong> 또는 <em>, 단지 집합되면 <b> 또는 <i>.

Juno강조: strong과 b, em과 i<strong>과 <b> 모두 굵게 가고, <em>과 <i> 모두 기울임으로 갑니다. 시작할 때, 경고처럼 뭔가 중요할 때 <strong>에 도달하고, 목소리처럼 단어를 강조하려는 경우 <em>에 도달하세요. 그 2개가 거의 모든 것을 작성합니다.

Juno강조: strong과 b, em과 i<strong>은 중요를 의미하고, <em>은 강조를 의미하며, 둘 다 의미를 지닙니다. <b>와 <i>는 그 뒤에 의미 없이 동일한 굵게 기울임이며, 텍스트를 단지 집합되게 하기 위해 사용합니다. 같은 모양이므로 모양이 아니라 의미로 쌍을 선택하세요.

Juno강조: strong과 b, em과 i 화면에서는 모든 4개가 단지 굵게 기울임입니다. 차이는 스크린 리더가 무엇을 듣는지입니다. <strong>과 <em>은 중요도와 스트레스를 인코딩하고 다르게 공지될 수 있으므로, 의도했을 때 <b> 또는 <i>를 잡는 것은 조용히 의미를 떨어뜨립니다. <b>와 <i>는 텍스트가 단지 집합되어 있을 때만 올바르고, 키워드 또는 용어일 때이며, 더 구체적인 요소가 맞지 않을 때입니다.

기타 인라인 텍스트 (인용문, <code>, <abbr> 등)

굵게 및 기울임을 넘어, HTML은 일반적인 텍스트 비트를 위한 작은 요소를 가지고 있습니다. 짧은 인용문은 <q>에 들어가고, 브라우저가 인용 부호를 추가합니다. 명령의 이름과 같은 코드 조각은 **<code>**에 들어가며, 브라우저가 모노스페이스 글꼴로 표시하므로 일반 작성과 구분됩니다.

<p>할머니는 항상 <q>지켜보는 냄비는 끓지 않는다</q>고 말씀하셨습니다.</p>
<p>파일을 <code>Ctrl S</code> 단축키로 저장하세요.</p>

이것들 중 몇 가지가 더 있지만, 짧은 인용문을 위한 <q>와 코드를 위한 <code>는 대부분 만날 두 개입니다. 각각은 작은 텍스트 비트를 감싸고 브라우저에 그것이 무엇인지 알려줍니다.

이것들은 인라인 요소입니다. 블록 (<p>)과 달리 자신의 줄로 끊기지 않고 단락 내 텍스트의 실행을 감쌉니다. 각각은 텍스트 조각이 무엇인지 이름 짓으므로, 평문 <span>을 스타일 지정하는 대신 특정 요소에 도달하세요.

알아두면 좋은 것들:

<p>보고서는 <cite>The Pragmatic Programmer</cite>을 두 번 인용합니다.</p>
<p><code>npm install</code>을 실행한 다음 <kbd>Enter</kbd>를 누르세요.</p>
<p>방은 바닥 면적이 <strong>24m<sup>2</sup></strong>입니다.</p>
<p>이전 총합은 <del>£40</del> <ins>£32</ins>였습니다.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr>이 성숙해지면서 태그가 정착합니다.</p>

<cite>은 작품의 제목을 명명합니다. <code>은 코드를 표시하고, <kbd>은 키보드 입력을 표시하며, <samp>은 프로그램 출력을 표시합니다. <sup>과 <sub>은 위첨자 및 아래첨자이며, 지수 및 화학 공식 같은 것들을 위합니다. 도 기호는 자신의 문자, °, 위첨자보다는 것입니다. <del>과 <ins>은 삭제되고 삽입된 텍스트를 표시하며, 편집 또는 가격 변경을 표시하는 데 유용합니다. <abbr>은 약자를 표시하고, title 특성은 전체 확장을 보유합니다.

<q>은 짧은 인라인 인용문을 위한 것이고 자동으로 인용 부호를 추가합니다. 더 길고 독립형의 인용문을 원할 때는 <blockquote>이 필요하며, 블록 요소입니다.

이것들은 인라인 요소이며, 자신의 블록을 형성하기보다는 텍스트 줄 내에서 흐릅니다. 텍스트 조각이 마크업에서 의미를 전달할 수 있도록 존재하며, 이것이 보조 기술, 검색 엔진, 자신의 스타일링 및 스크립트에 해당 의미를 사용할 수 있게 합니다. 실질적인 지침은 맞는 가장 구체적인 요소를 사용하고, 없는 경우에만 중립적인 <span>으로 폴백하는 것입니다.

실제로 사용할 집합:

<p><cite>Designing Data-Intensive Applications</cite> 3장을 참고하세요.</p>
<p><kbd>git status</kbd>를 입력하여 <samp>nothing to commit</samp>을 확인하세요.</p>
<p>샘플은 <abbr title="Cascading Style Sheets">CSS</abbr> 변수를 사용했습니다.</p>
<p>수정된 수치: <del>1,200</del> <ins>1,450</ins> 항목.</p>

<cite>은 인용된 작품(책, 영화, 논문)의 제목을 표시하며, 사람의 이름이 아니며, 사람들이 계속 잘못 말하는 점입니다. <code>은 컴퓨터 코드의 조각이고 <kbd>은 사용자 키보드 입력이며, 두 가지 모두 자주 모노스페이스로 렌더링되지만 상호 작용의 반대 방향을 의미합니다. <samp>은 프로그램의 샘플 출력입니다. <abbr>은 약자를 표시하고 전체 확장을 보유하는 title 특성을 사용합니다. 스크린 리더는 해당 확장을 공지하거나 제공할 수 있으며, 호버로 도구 설명으로 나타나므로 독자는 절대 문자가 무엇인지 추측하게 되지 않습니다. <del>과 <ins>은 편집을 나타내며, 텍스트 제거 및 추가 텍스트를 나타내고, 그렇게 공지되며, 이는 가격 수정 또는 빨간색 줄과 같이 변경이 포인트일 때 중요합니다.

인용문의 경우, <q>은 인라인이고 CSS를 통해 로캘 인식 인용 부호를 삽입합니다 (그 이유로 직접 부호를 입력하지 않습니다). <blockquote>은 연장된 인용문을 위한 블록 레벨 요소이며, 둘 다 소스의 URL을 보유하는 선택사항 cite 특성을 취합니다. 이들의 모든 것을 통과하는 라인: 요소가 의미이며, 모양은 별도 레이어로, CSS에서 설정합니다. 모양에 대한 태그가 아닌 텍스트가 무엇인지에 대한 태그를 선택하는 것이 페이지를 볼 수 없는 도구에 읽을 수 있도록 유지하는 것입니다.

Juno기타 인라인 텍스트 (인용문, 코드, 약자 등)<q>은 짧은 인용문을 감싸고 인용 부호를 추가하며, <code>은 모노스페이스 글꼴로 코드를 표시하여 눈에 띕니다. 이러한 작은 태그들이 더 있지만, 그 2개가 가장 자주 나타납니다. 각각은 단지 텍스트를 감싸고 그것이 무엇인지 말합니다.

Juno기타 인라인 텍스트 (인용문, 코드, 약자 등) 이 인라인 태그들은 각각 조각이 무엇인지 명명합니다. <code>은 코드, <kbd>은 누른 키, <cite>은 작품의 제목, <abbr>은 전체 형식을 위한 title입니다. 평문 <span>을 스타일 지정하는 대신 구체적인 것에 도달하세요. 그리고 짧은 인용문을 위한 <q>, 독립형을 위한 <blockquote>.

Juno기타 인라인 텍스트 (인용문, 코드, 약자 등) 맞는 가장 구체적인 인라인 요소를 사용하고 없는 경우에만 <span>으로 폴백하세요. 사람들이 잘못 사용하는 것들: <cite>은 작품의 제목이며 사람이 아니고, <code>대 <kbd>은 모양은 비슷하지만 상호 작용의 반대 끝을 의미합니다. <abbr>의 title은 보조 기술로 읽히고, <q>은 고유의 인용 부호를 제공하므로, 입력하지 마세요.