[HTML+CSS3] 텍스트 관련 태그

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

 

<hn> 태그 – 제목 표시하기 (heading의 줄임말)

<h1>(가장 큰 제목) ~ <h6> (가장 작은 제목)

<hn> 제목 </hn>

 

<p> 태그 – 단락 만들기 (paragraph의 줄임말)

<p> 텍스트 </p>

 

<br> 태그 – 줄 바꾸기 (break의 줄임말)

<br>

 

<hr> 태그 – 분위기 전환을 위한 수평 줄 넣기 (horizontal의 줄임말)

<hr>을 이용하면 가로선이 삽입되는데 CSS로 제거 가능

<hr>

 

<blockquote> 태그- 인용문 넣기

다른 블로그나 사이트의 글을 인용한 경우 사용

<blockquote> 인용내용 </blockquote>

 

<pre> 태그 – 입력하는 그대로 화면에 표시하기 (preformat의 줄임말)

소스에 표시한 공백이 브라우저에 그대로 표시됨

 cf) 웹문서를 소리로 읽어주는 기꼐 나 점자로 표시해주는 기계는 <pre>태그가 적용된 부분을 만나면 건너뜀

<pre> 텍스트 </pre>

 

02-2 텍스트를 한 줄로 표시하는 태그

<strong> 태그, <b> 태그 – 굵게 표시하기

화면 낭독기에서의 기능에 따라 구분

<strong> 굵게 강조한 텍스트(경고나 주의사항처럼 중요한 내용 강조) </strong>

<b> 굵게 표시할 텍스트(문서의 키워드처럼 단순히 굵게 표시) </b>

<strong>태그 사용시 화면 낭독기가 그 부분이 강조됨을 알려줌

 

<em> 태그, <i> 태그 – 이탤릭체로 표시하기 (emphasis의 줄임말, italic의 줄임말)

비스듬히 표시할 때 <em> 태그나 <i> 태그 사용

<em> 이탤릭체로 강조할 텍스트(문장에서 흐름상 특정 부분 강조) </em>

<i> 이탤릭체로 표시할 텍스트(마음 속 생각이나 꿈, 기술적 용어, 다른 언어의 관용구,등) </i>

 

<q> 태그 – 인용 내용 표시하기 (quote의 줄임말)

<blockquote> 블록레벨태그 : 인용 내용이 줄이 바뀌어 나타남 </blockquote>

<q> 인라인레벨태그 : 줄바꿈없이 다른 내용과 함께 한줄로 표시되고 인용내용은 따옴표를 붙여 표시함 </q>

 

<mark> 태그 – 형관펜 효과 내기

<mark> 텍스트 </mark>

 

<span> 태그 – 줄바꿈없이 영역 묶기

줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주요 사용

<span style = “color:blue;”> 텍스트 </span> : 일부글자 파란색으로 표시

 

<ruby> 태그 – 동아시아 글자 표시하기

주로 동아시아 국가들의 글자에 주석을 함께 표시하기위한 용도로 사용

주석 : <rt>태그로 표시

<ruby> 내용 <rt> 주석 </rt> </ruby>