Learn HTML & CSS텍스트 요소
방문자가 페이지에서 읽는 내용은 대부분 평범한 글, 즉 제목, 문단, 굵게 강조한 경고문, 인용된 문장, 코드 조각 같은 것들입니다. HTML에는 이런 각각의 역할에 맞는 요소가 따로 마련되어 있고, 알맞은 요소를 고르는 일은 단순히 텍스트의 모양을 바꾸는 것 이상의 의미를 갖습니다. 이를 통해 브라우저와 검색 엔진, 보조 기술에게 각 텍스트가 실제로 어떤 의미를 가지는지 알려줄 수 있습니다.
제목과 위계 구조
HTML은 <h1>부터 <h6>까지 여섯 단계의 **제목(heading)**을 제공합니다. 제목은 페이지 전체 또는 페이지의 한 구획에 붙이는 표제입니다. <h1>은 맨 위에 오는 큰 글씨의 메인 제목입니다. <h2>는 주요 구획을 나타내고, <h3>은 그 안의 하위 구획을, 이런 식으로 <h6>까지 이어집니다.
인쇄된 책을 떠올려 보세요. 표지에 있는 제목이 <h1>입니다. 각 장의 제목은 <h2>이고, 장 안에 있는 소제목들은 <h3>입니다. 이렇게 단계를 이용해서 무엇이 무엇 아래에 속하는지를 나타냅니다.
처음부터 꼭 기억해 둘 것이 있습니다. 원하는 글자 크기를 만들기 위해 제목 태그를 고르면 안 됩니다. <h1>이 크게 보이는 건 사실이지만, 그 역할은 "이 글씨를 크게 만들어라"가 아니라 "이것이 메인 제목이다"라고 말하는 것입니다. 어딘가의 텍스트를 크게 만들고 싶다면, 그건 나중에 배울 CSS가 할 일입니다.
<h1>Sourdough for beginners</h1>
<h2>Building a starter</h2>
<p>A starter is a living culture of flour and water.</p>
<h3>Day one to three</h3>
<p>Mix equal weights of flour and water, then wait.</p>
<h2>Baking your first loaf</h2>
<p>Once the starter is active, you are ready to bake.</p><h1> 하나가 페이지 전체의 제목을 나타냅니다. 두 개의 <h2> 제목이 주요 구획을 표시하고, <h3>는 그중 첫 번째 구획 안에 깔끔하게 자리 잡고 있습니다. 본문을 한 글자도 읽지 않아도 제목의 숫자만 보면 글의 전체 구조가 눈에 들어옵니다.
<h1>부터 <h6>까지입니다. 그중 <h1>이 맨 위에 오는 유일한 메인 제목입니다. 나머지는 구획과 소구획에 이름을 붙이는 역할을 합니다. 저도 초반에 걸려들었던 함정인데, 그냥 크게 보인다는 이유로 제목 태그를 고르면 안 됩니다. 그건 CSS가 할 일입니다. 숫자는 그것이 무엇인지를 나타내는 것이지, 크기를 나타내는 게 아닙니다. 문단과 줄바꿈
평범한 텍스트 묶음은 문단(paragraph), 즉 <p> 요소 안에 넣습니다. 각 문단을 개별적인 <p>...</p>로 감싸면 브라우저가 위아래로 약간의 공백을 넣어주기 때문에, 책에서처럼 문단끼리 서로 떨어져 보이게 됩니다.
<p>Bread needs four things: flour, water, salt, and time.</p>
<p>Get those right and the rest is patience.</p>HTML 파일에서 Enter 키를 누르는 것은 페이지에 아무런 영향을 주지 않는다는 점에 주의하세요. 브라우저는 여러분이 입력한 줄바꿈이나 추가 공백을 무시하고, 오직 태그만 신경 씁니다. 그래서 문단을 구분하려면 그냥 줄을 나눠 입력하는 게 아니라 <p>를 사용해야 합니다.
주소나 짧은 시의 행처럼 문단 안에서 정말로 줄을 바꿔야 할 때가 있다면, 그럴 때 쓰는 <br> 요소가 있습니다. 이 요소는 단 한 번의 줄바꿈만을 강제로 만들 뿐, 그 이상의 역할은 하지 않습니다.
<p>...</p> 안에 넣으면, 그게 바로 문단 사이에 간격을 만들어줍니다. 브라우저는 여러분이 입력한 Enter나 공백을 무시하니까, 태그가 그 일을 대신합니다. <br>은 주소처럼 문단 중간에서 정말로 줄을 바꿔야 할 때만 쓰세요. 강조: <strong>와 <b>, <em>와 <i>
텍스트를 굵게 만드는 요소가 두 개, 기울임으로 만드는 요소가 두 개 있습니다. <strong>과 <b>는 둘 다 굵게 표시되고, <em>과 <i>는 둘 다 기울임으로 표시됩니다. 즉 네 개의 태그가 두 가지 모양을 만들어냅니다.
<p><strong>Warning:</strong> the oven is very hot.</p>
<p>You need to knead the dough <em>thoroughly</em>.</p>지금 단계에서는 경고처럼 중요한 텍스트에는 **<strong>**을 쓰고, 소리 내어 읽을 때 목소리에 힘을 주고 싶은 단어에는 <em>을 쓰세요. 대부분의 경우 이 둘만으로 충분하고, 브라우저가 알아서 굵게, 기울임으로 표시해 줍니다.
<strong>과 <b>는 둘 다 굵게 표시되고, <em>과 <i>는 둘 다 기울임으로 표시됩니다. 처음에는 경고처럼 중요한 것에는 <strong>을, 목소리에 힘을 주고 싶은 단어에는 <em>을 쓰세요. 이 두 개만으로 여러분이 쓰는 글의 거의 전부를 감당할 수 있습니다. 그 외의 인라인 텍스트 (인용문, <code>, <abbr> 등)
굵게, 기울임 말고도 HTML에는 자주 쓰이는 텍스트 조각을 위한 작은 요소들이 있습니다. 짧은 인용문은 <q>에 넣으면 브라우저가 인용 부호를 알아서 붙여줍니다. 명령어 이름 같은 코드 조각은 **<code>**에 넣으면 브라우저가 고정폭(monospace) 글꼴로 보여줘서 일반 글과 구별됩니다.
<p>My gran always said <q>a watched pot never boils</q>.</p>
<p>Save the file with the <code>Ctrl S</code> shortcut.</p>이런 요소가 몇 개 더 있지만, 짧은 인용문에는 <q>, 코드에는 <code>가 가장 많이 등장하는 두 가지입니다. 각각의 요소는 작은 텍스트 조각을 감싸고 그것이 무엇인지 브라우저에게 알려줍니다.
<q>는 짧은 인용문을 감싸고 인용 부호를 알아서 붙여주고, <code>는 코드를 고정폭 글꼴로 보여줘서 눈에 띄게 만들어줍니다. 이런 작은 태그가 몇 개 더 있지만, 이 둘이 가장 자주 등장합니다. 각각은 그냥 텍스트 조각을 감싸고 그게 무엇인지 알려줄 뿐입니다.