텍스트를 덩어리로 묶어 주는 태그

텍스트를 덩어리로 묶어 주는 태그

• 텍스트를 블록(block)으로 묶어 처리하는 태그들입니다.
• 아래 태그들은 선택한 텍스트 글자에만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용됩니다.

1. <hn> 태그

• <hn> 태그는 제목을 표시할 때 사용됩니다.
• 제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다.
• 제목 크기에 따라 <h1>~<h6> 태그까지 사용할 수 있는데 <h1>이 가장 크게 표시되고 <h6>이 가장 작게 표시됩니다.

 

기본형 : <hn> 제목 </hn>

2. <p> 태그

• <p> 태그는 단락을 만들때 사용하는 태그이며 텍스트를 표시할 때 가장 많이 사용하는 태그입니다.
• 이때 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말합니다.
• <p>태그로 표시하는 텍스트 단락은 </p> 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 자동으로 줄이 바뀌게 됩니다.

 

기본형 : <p> 텍스트 </p>

3. <br> 태그

• 텍스트 단락에서 줄바꿈을 하더라도 웹 브라우저 창에는 줄바꿈 없이 한 줄로 표시됩니다. 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에 <br> 태그를 사용합니다.
• <br> 태그는 닫는 태그가 없습니다.

 

기본형 : <br>

4. <hr> 태그

• <hr> 태그는 수평 줄을 삽입할 때 사용합니다.
• 보통 여러 개의 텍스트 단락을 나열하는 도중에 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용합니다.
• <hr>태그를 사용하면 기본으로 가로선이 삽입되는데 CSS를 이용해 가로선을 없앨 수 있습니다.
• 닫는 태그는 없습니다.

 

기본형 : <hr>

5. <blockquote> 태그

• <blockquote> 태그는 다른 블로그나 사이트의 글을 인용할 경우에 사용합니다.
• 이때 인용한 문장은 다른 텍스트보다 들여 써지므로 구별됩니다.

 

기본형 : <blockquote> 인용문 </blockquote>

6. <pre> 태그

• HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됩니다. 하지만 <pre>태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시됩니다.
• <code>나 <samp>, <kbd> 같은 태그를 사용해 프로그램 소스를 그대로 브라우저창에 보여주어야 하기 때문에 <pre>가 함께 사용됩니다.
• <pre> 태그를 사용할 떄는 접근성에 대해 한 번 더 고려해야 합니다. 웹 문서를 소리로 읽어 주는 기계나 점자로 표시해 주는 기계는 <pre> 태그가 적용된 부분을 만나면 건너 뛰어 버리기 때문입니다.
  따라서 그 부분의 내용을 알 수 있도록 대체 텍스트를 추가하는 것이 좋습니다.

 

기본형 : <pre> 텍스트 </pre>

 

 

 

 

 

참고 : HTML5 + CSS3 웹 표준의 정석