HTML - 서식과 인용

Formatting(서식)

 HTML에서 텍스트에 다양한 효과를 주는 태그로 <b>, <mark>, <del>, <ins>, <sup> 등이 있다.

 

<b> </b> , <strong></strong> : 강조 효과로 HTML 문서에서 텍스트를 굵게 표현하고 싶을 때 사용한다.

<i></i>, <em> </em> : HTML 문서에서 텍스트를 이탤릭체로 표현하고 싶을 때 사용

<strong> 와 <em> 은 단순히 강조 효과 뿐만 아니라 중요하다는 의미를 포함하여 검색엔진에서 더 중요하게 인식하도록 해줍니다.

 

<mark></mark> : 텍스트에 하이라이팅 효과를 적용

 

<del> </del> : 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운것과 같은 효과를 준다.

 

<ins> </ins> : 텍스트 밑에 가로줄을 만들어마치 빈칸에 텍스트를 삽입입한 것과 같은 효과를 준다.

 

 : 위첨자

 : 아래첨자

첨자 예시

 

---

인용구(Quotation)

HTML에서 인용구를 표현하는 방법에는 짧은 인용구 와 블록 인용구가 있다.

 

짧은 인용구

짧은 인용구는 <q> 태그를 사용하여 표현할 수 있고 자동으로 앞뒤에 큰 따옴표가 붙는다.

 

<p> 

이것은 <q>첫 번째</q> 문단입니다.<br> 

이것은 두 번째 문단입니다. 

</p>

---

블록인용구

블록인용구는 길이가 긴 잉용문에 쓸 때 사용하고 <blockquote>태그를 사용하여 표현할 수 있다. <blockquote>태그는 문단으로 구분하여 나타냅니다.

<p>

    이것은 첫 번째 문단입니다.

    이것은 두 번째 문단입니다.

</p>

<blockquote>

이것은 긴 인용문으로 blockquote태그를 사용하고 하나의 문단으로 봅니다.

</blockquote>

---

축약형 표현 

HTML에서 용어의 축약형을 표현하기 위해서는 <abbr>(abbreviation)을 사용한다. <abbr> 태그 위에 마우스를 올리면 축약된 용어의 원형이 나타납니다.

<p><strong><abbr title = "League Of Legend">LOL</abbr></strong>은 전 세계적으로 유명한 게임입니다.</p>

LOL 글자에 마우스를 대면 League Of Legend라는 글자가 나타납니다.

 

주소 표현

HTML에서 주소 표현을 하기 위해서는 <address> 태그를 사용한다. 

 

<address> 서울 특별시 강남구 선릉로 </address>

 

위에 보이는 것과 같이 <address> 태그를 사용하면 글씨체가 이탤릭체로 표현되고 위 아래 공백이 자동으로 삽입이 된다.