04-1 텍스트 입력하기

웹 사이트에서는 텍스트로 정보를 쉽게 전달할 수 있음. 신문 기사나 블로그, 쇼핑몰 상세 페이지 등 대부분의 사이트에서 텍스트를 사용함.
지금부터 텍스트를 입력할 때 기본이 되는 제목과 본문, 단락과 줄바꿈 등의 태그를 알아보겠음.

>> 제목을 나타내는 <hn> 태그
웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시함. 이렇게 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 바로 제목 태그임.
기본형 : <hn>제목</hn>
<hn>태그에서 h는 제목을 뜻하는 heading을 줄인 말임. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 할 수 있음.
<h1>이 가장 큰 제목이고 <h2>,<h3>,...,<h6>의 순서로 크기가 작아짐.

>> 텍스트 단락을 만드는 <p>태그, 줄을 바꾸는 <br> 태그
<p>와 </p>태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐.
이때 기억해 두어야 할 점은 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다는 것임.

>> <br>태그로 줄 바꾸기
텍스트 단락을 만들 때 원하는 위치에서 줄을 바꾸려면 <br>태그를 사용한다.
<br>태그는 단독으로 사용하므로 닫는 태그가 필요없음.

>> <br>태그와 <p>태그의 차이점
<br> 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시할 수 있습니다.
하지만 실제로는 단락이 만들어진 게 아니므로 CSS 를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생김
따라서 텍스트 단락을 만들 때는 <p>태그를 사용해야함

>> 인용할 때 쓰는 <blockquote> 태그
브라우저가 인용문을 인식할 수 있게 하려면 <blockquote>와 </blockquote>태그로 인용문을 감싸줘야함.
그러면 웹 브라우저는 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 씀.
화면 낭독기에서 웹 문서를 읽어 내려갈 때도 <blockquote> 태그 안의 내용을 다른 텍스트와 구분함

>> 텍스트를 굵게 표시하려면 <strong>, <b> 태그
텍스트를 굵게 표시할 때에는 <strong>이나 <b> 태그를 사용함.
<strong>태그와 <b>태그는 눈으로 볼 때 별로 차이가 느껴지지 않지만 그래도 구분하는 이유는 화면 낭독기의 기능 때문임
예를 들어 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 <strong>태그를 쓰고 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용함.
보이는 것이 아니라 의미가 중심인 것임. 화면 낭독기는 <strong> 태그를 사용한 부분을 강조하여 읽어줌.

>> 기울인 텍스트를 입력해 주는 <em>,<i>태그
<em>태그에서 em은 강조를 뜻하는 emphasis의 줄임말이고 <i>태그에서 i는 이탤릭체, 즉 기울기체를 뜻하는 italic의 줄임말임
<em>태그는 문장에서 흐름상 특정부분을 강조하고 싶을 때 사용하고, <i>태그는 마음속의 생각이나 용어, 관용구 등에 사용함
다시 말하면 <em>태그는 문장 중에서 특별히 강조하고 싶은 부분에 사용하고, 단순히 다른 텍스트와 구별하기 위해 기울여 표시한다면 <i>태그사용