1. 제목을 나타내는 h 태그
h는 제목을 뜻하는 heading의 줄인 말로 h1~h6까지 있다.
<h1>이 가장 큰 제목이고 <h6>이 가장 작다.
h 태그는 반드시 닫는 태그가 필요하다. <h1> </h1>
<h1>h1의 크기</h1>
<h2>h2의 크기</h2>
<h3>h3의 크기</h3>
<h4>h4의 크기</h4>
<h5>h5의 크기</h5>
<h6>h6의 크기</h6>
2. 텍스트 단락을 만드는 p 태그, 줄을 바꾸는 br 태그
<p>와 </p> 태그 사이에 텍스트를 입력하면
텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 생성된다.
이 때 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
<br> 태그는 원하는 위치에서 줄을 바꿀 수 있다.
<br> 태그는 닫는 태그가 없이 단독으로 쓰인다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 <br>혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
3. 인용할 때 쓰는 blockquote 태그
웹 브라우저는 " " 큰 따옴표와 같이 인용문을 인식할 방법이 없다.
브라우저가 인용문을 인식할 수 있게 하려면 blockquote 태그로 인용문을 감싸 주어야 한다.
blockquote 태그를 사용하면 안으로 들여 쓴 상태가 된다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<blockquote>
<p>비타민 C와 비타민 P가 풍부해 <br>혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</blockquote>
4. 텍스트를 굵게 표시하는 strong 태그와 b 태그
strong 태그는 굵게 강조할 텍스트에 쓰이고
b 태그는 굵게 표시할 텍스트에 쓰인다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 <br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
5. 기울인 텍스트를 입력해주는 em 태그와 i 태그
em 태그는 이탤릭체로 강조할 텍스트에 쓰이고
i 태그는 단순히 이탤릭체로 표시할 텍스트에 쓰인다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로 <br>일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해 <br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
6. 그 외의 태그들
<small></small> 부가 정보처럼 작게 표시되는 텍스트에 쓰인다.
<sub></sub> 아래 첨자를 표시한다.
<sup></sup> 위 첨자를 표시한다.
<s></s> 취소선을 표시한다.
<u></u> 밑줄을 표시한다.
<p>가격 : 13,000원 <small>(부가세 별도)</small></p>
<p>물의 화학식은 H<sub>2</sub>0입니다.</p>
<p>16 = 4<sup>2</sup></p>
<p><s>34,000원</s>19,000원</p>
<u>텍스트에 밑줄 긋기!</u>
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.