HTML 텍스트 관련 태그

 

 

중요한 내용을 강조하고 싶을때 사용하는 태그,

HTML과 같이 약어로 된 단어를 쓸 때 어떤 약자인지를 설명할 수 있는 태그,

전문용어를 사용할때 사용하는 태그,

다른 사이트에서 복사해와서 사용할 때 주소 출처를 남길 수 있는 태그

 

 

<i>,<em>

<p>
  <i>이탤릭체</i>로 표기되는 태그
</p>
<p>
  <em>이탤릭체</em>로 표기되는 태그
</p>

 

 

결과를 보자면,

 

 

i태그와 em태그 둘 다 똑같이 이탤릭체로 나타나는데요.

강조하는 의미를 담고 있는 이탤릭체가 있다면 em태그를,

시각적으로만 이탤릭체로 나타내고 싶을 때는 i태그를 사용해야 합니다.

(i태그와 em태그 모두 인라인 요소)

 

 

 

 

---

 

 

 

 

<b><strong>

<p>
  <b>볼드체</b>로 표기되는 태그
</p>
<p>
  <strong>볼드체</strong>로 표기되는 태그
</p>

 

i, em태그를 썼을 때와 마찬가지로 p태그 안에 b태그와 strong태그를 넣어줬는데요.

 

 

결과를 보시면,

 

 

 

b태그와 strong 태그 모두 두꺼운 볼드체로 나타나는 걸 볼 수 있습니다.

강조하는 의미를 담고 있는 볼드체를 사용할 땐 strong태그를,

시각적으로만 볼드체로 나타내고 싶을 때는 b태그를 사용해야 합니다.

(b태그와 strong태그 모두 인라인 요소)

 

 

 

 

---

 

 

 

 

<abbr>

<abbr>HTML</abbr>

 

abbr태그를 이용하여 HTML을 묶어줬는데요

abbr태그는 약어를 사용할 때 어떤 약어인지를 같이 표시할 수 있는 태그입니다.

HTML은 Hypertext Markup Language의 약자이기 때문에 설명을 같이 넣어주려면

 

<abbr title="Hypertext Markup Language">HTML</abbr>

 

abbr 안에 title이라는 속성에 어떤 약어인지 써주시면 됩니다.

 

 

결과를 보시면,

 

위와 같이 텍스트 아래 점선 모양으로 나타나고,

마우스를 올리면 title에 써준 Hypertext Markup Language가 툴팁으로 표시됩니다.

(abbr태그도 인라인 요소)

 

 

 

 

---

 

 

 

<dfn>

<dfn>CSS</dfn>

 

dfn태그는 전문용어를 나타낼 때 쓰는 태그인데요.

abbr처럼 title을 이용해 설명을 써넣어줄 수 있는 태그입니다.

 

결과를 보시면,

 

 

이탤릭체처럼 글꼴이 기울여서 나타납니다.

abbr태그와 마찬가지로 title속성을 사용해 설명을 넣어주셨다면

마우스를 올렸을 때 설명이 툴팁으로 나타나게 됩니다.

 

 

 

---

 

 

<blockquote><q>

<blockquote>
  중요한 내용을 강조하고 싶을때 사용하는 태그,
  HTML과 같이 약어로 된 단어를 쓸 때 어떤 약자인지를 설명할 수 있는 태그,
  전문용어를 사용할때 사용하는 태그,
  다른 사이트에서 복사해와서 사용할 때 주소 출처를 남길 수 있는 태그
</blockquote>
<p>
  <q>중요한 내용을 강조하고 싶을때 사용하는 태그,</q>
  HTML과 같이 약어로 된 단어를 쓸 때 어떤 약자인지를 설명할 수 있는 태그,
  전문용어를 사용할때 사용하는 태그,
  다른 사이트에서 복사해와서 사용할 때 주소 출처를 남길 수 있는 태그
</p>

 

이번 포스팅 맨 위에 쓴 글을 복사해서 넣어봤는데요

blockquote태그에는 문단을 넣어주고,

p태그 안에 부분만 q태그로 넣었습니다.

두 태그 모두 속성으로 cite를 넣어줄 수 있는데요.

cite는 글을 복사한 원본이 있는 사이트 주소를 넣어주면 됩니다.

 

 

<blockquote cite="https://heejoong.tistory.com/">
  중요한 내용을 강조하고 싶을때 사용하는 태그,
  HTML과 같이 약어로 된 단어를 쓸 때 어떤 약자인지를 설명할 수 있는 태그,
  전문용어를 사용할때 사용하는 태그,
  다른 사이트에서 복사해와서 사용할 때 주소 출처를 남길 수 있는 태그
</blockquote>
<p>
  <q cite="https://heejoong.tistory.com/">중요한 내용을 강조하고 싶을때 사용하는 태그,</q>
  HTML과 같이 약어로 된 단어를 쓸 때 어떤 약자인지를 설명할 수 있는 태그,
  전문용어를 사용할때 사용하는 태그,
  다른 사이트에서 복사해와서 사용할 때 주소 출처를 남길 수 있는 태그
</p>

 

 

결과를 보시면,

 

 

 

 

blockquote태그는 앞에 들여 쓰기가 되어 표시되고,

q태그는 ""로 감싸 져서 나타나게 됩니다.

 

인용문을 사용할 때 출처를 나타내는 태그를 알아보았는데요.

blockquote태그는 문단을 복사해왔을 때 사용하는 태그,

q태그는 간단한 문장, 단어 정도로 복사해 왔을 때 사용하는 태그입니다.