[HTML] 텍스트 입력하기

제목을 나타내는 <hn> 태그

• <hn> 태그에서 h는 제목을 뜻하는 heading의 줄임말
• n의 자리에는 1~6의 숫자가 들어감
• <h1>이 가장 큰 제목이고 <h2> , <h3> , ..., <h6> 의 순서로 크기가 작아짐

<hn>제목</hn>

텍스트 단락을 만드는 <p> 태그, 줄을 바꾸는 <br> 태그

• <p> 태그 - 텍스트 단락을 만듦
• <br> 태그 - 원하는 위치에서 줄바꿈
        - 단독으로 사용하므로 닫는 태그 불필요

<p>내용</p>
<br>

인용할 때 쓰는 <blockquote> 태그

• 브라우저가 인용문을 인식할 수 있게 해줌
• 다른 텍스트 단락보다 안으로 들여 쓴 상태

<blockquote>인용문</blockquote>

텍스트를 굵게 표시하려면 <strong>, <b> 태그

• <strong> 태그와 <b> 태그는 눈으로 볼 때 별로 차이가 느껴지지 않음
• 그러나 화면 낭독기에서 차이가 남
  • 화면 낭독기: 시각 장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보를 음성으로 들려주는 프로그램

<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>

기울인 텍스트를 입력해 주는 <em>, <i> 태그

• <em> : 강조할 텍스트
• <i> : 이탤릭체로 표시할 텍스트

<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>

그 밖의 다양한 텍스트 관련 태그들

종류	설명	예시
<abbr>	줄임말을 표시하고 title 속성을 함께 사용할 수 있습니다.	<abbr title="Internet of Things">IoT</abbr>
<cite>	웹 문서나 포스트에서 참고 내용을 표시합니다.	<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이야 - 영화, <cite>'비포선셋'</cite> 중</p>
<code>	컴퓨터 인식을 위한 소스코드입니다.	<code>function savetheLocal()</code>
<small>	부가 정보처럼 작게 표시해도 되는 텍스트입니다.	<p>가격: 13,000원 <small>(부가세 별도)</small><p>
<sub>	아래 첨자를 표시합니다.	<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
<sup>	위 첨자를 표시합니다.	<p>E = mc<sup>2</sup></p>
<s>	취소선을 표시합니다.	<p><s>34,000원</s>19,000원</p>
<u>	밑줄을 표시합니다.	<u>텍스트에 단순히 밑줄 긋기</u>
<ins>	공동 작업 문서에서 새로운 내용을 삽입합니다.	<ins>새로운 내용을 삽입합니다.</ins>
<del>	공동 작업 문서에서 기존 내용을 삭제합니다.	<del>기존 내용을 삭제합니다.</del>

출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)