본문 바로가기

프로그래밍/HTML 기초

HTML 문법 - 3 (텍스트 서식 태그, 인용 태그)

 

텍스트 서식 태그

 

<b> </b> 태그 사이의 내용을 굵게(bold)
<i> </i> 기울이게(italic)
<small> </small> 작게(small)
<ins> </ins> 밑줄(insert)
<del> </del> 취소선(delete)
<mark> </mark> 강조(mark)
<strong> </strong> 중요표시(strong)
<em> </em> 강조(emphasize)
<sup> </sup> 위 첨자(superscript)
<sub> </sub> 아래 첨자(subscript)
<code> </code> 코드(code)

 

 

순서대로 작성시 위와 같은 형태를 띄게 된다.

<b>와 <strong>은 둘 다 굵게 표시를 하게 되는데, <b>는 텍스트를 강조할 때 <strong>은 내용 자체를 강조할 때 사용한다고 한다.

 

인용 태그

 

<q> </q>

<q> </q> 는 짧은 인용구 이용 시 사용한다.

q는 quote를 뜻한다.

 

<q>인용구</q>

이렇게 작성 시

 

이렇게 보이게 된다.

 

<blockquote> </blockquote>

<blockquote> </blockquote> 는 길이가 긴 인용구를 이용 시 사용한다.

 

<abbr> </abbr>

<abbr> </abbr> 는 약어를 정의할 때 사용한다.

abbr은 abbreviation을 뜻한다.

 

<cite> </cite>

<cite> </cite> 는 인용구의 제목을 작성할 때 사용한다.

 

<address> </address>

<address> </address> 는 주소 작성 시 사용한다.

 

<a> </a>

<a> </a> 는 링크 생성 시에 사용한다. 같은 사이트 내의 이동이나 다른 사이트로의 이동에 사용할 수 있다.

 

같은 사이트 내의 이동은 h태그와 같이 사용해서 구현해 줄 수 있다.

예를 들어 <h1 id='content1'> 이렇게 해놓고 <a href ='#content1'> 이런 식으로 구현해줄 수 있다.

 

href 라는 속성에 값을 넣어서 이동할 링크를 설정해줄 수 있다.

 

target 이라는 속성에 값을 넣어서 창이 열릴 위치를 정해줄 수 있다.

  • _blank : 새로운 창
  • _self : 현재 창
  • _parent : 웹 브라우저의 부모 창
  • _top : 웹 브라우저의 전체 영역