2. text 관련 태그

1. 텍스트 관련 태그

• <h1~ 6 > 태그 : 제목 표시용 태그(블록 태그)

  • 제목을 표시할 때 사용하는 태그이나, 꼭 제목을 위해서만 사용해야 하는 것은 아닙니다.
    단지 일반 텍스트에 비해 크고 굵은 텍스트일 뿐이며, 제목이라는 의미를 가지고, 내용을 강조하고 싶을 때도 사용을 합니다.
  • h 뒤에 붙는 숫자는 1일 때 크기가 가장 크고, 6일 때 가장 작습니다.

• <p> 태그 : 문단 표시용 태그(블록 태그)

  • 텍스트를 표시할 때 가장 많이 사용되는 태그입니다.
  • 하나의 p태그가 하나의 단락을 의미합니다.(닫는 태그 전까지 쓰는 내용은 모두 하나의 문단으로 간주, 문자들끼리 덩어리처럼 붙어있는 형태로 표시)
  • p태그가 시작되면 새로운 줄에서 새롭게 시작됩니다. (새로운 <p>태그가 등장하면 줄 바꿈도 자동으로 실행됨)

    <p>태그, <h>태그 사용 주의사항

    • p태그가 h태그보다 큰 경우가 있더라도 의미에 맞춰서 사용하기(글자의 크기보다는 의미가 중요함)

• HTML 문서에서 텍스트를 작성할 때는 엔터를 통한 줄 바꿈 표시가 진행되지 않습니다. 이때 사용하는 태그가 <br>태그, <hr>태그입니다.

• <br> 태그 : 다음 줄로 넘어가는 태그(인라인 태그)

  • 텍스트 단락에서는 엔터를 눌러도 줄바꿈이 표시되지 않는데, 이는 <br>태그를 사용해 대체할 수 있습니다.
  • 줄바꿈 기능 외에는 다른 기능을 수행하지 않으므로 닫는 태그가 생략됩니다.

• <hr> 태그 : 수평 줄 넣기 태그(블록 태그)

  • 수평 줄 넣을 때 사용하는 태그. <br>태그처럼 특정기능을 수행하는 것 외엔 기능이 없으므로 닫는 태그가 생략됩니다.
  • 주로 내용의 주체가 바뀌거나 할 때 많이 사용합니다.

2. 문자 꾸미기 관련 태그

• 굵게 만들기(bold) : <strong>, <b>

  • 두 태그는 볼드 효과라는 면에서는 둘 다 눈으로 보이는 결과는 동일합니다.
  • 두 태그는 모두 인라인 태그입니다.
  • 두 태그의 차이점
    • <strong> 태그의 경우에는 텍스트 강조를 의미하는 시맨틱(의미를 전달함, 눈으로 보지 않아도 그 의미를 브라우저가 해석할 수 있음)을 포함하고 있어 시각 장애인을 위한 웹문서에서 주로 사용됩니다.
    • <b> 태그의 경우에는 텍스트를 굵게 하는 기능 외에는 특별한 시맨택은 없습니다.

      <strong> 태그와 <b> 태그, <p> 태그 의 차이점

      • <p> 태그 : 필요 없는 공간을 차지함(자신이 위치한 가로축 전부) => 블록 태그
      • <strong>, <b> : 자신이 포함하는 공간만 차지 => 인라인 태그

• 이탤릭체 효과 주기 : <em>, <i>

  • 글자를 기울임으로써 강조 효과를 주는 태그들이며 둘 다 눈으로 보여지는 결과는 동일합니다.
  • 두 태그는 모두 인라인 태그입니다.
  • 두 태그의 차이점
    • <em> 태그의 경우에는 콘텐츠를 강조하는 시맨틱적인 태그입니다.
    • <i> 태그의 경우에는 글자를 기울여주는 단순한 가시적인 결과만 보여줍니다.
    • \em> 태그는 명시적이거나 암시적인 대조를 표현할 때 주로 사용합니다.
      <i> 태그는 외국어, 등장인물의 생각 등 일반적인 글에서 벗어난 경우 사용합니다.(but, 책이나 영화 등의 제목은 <cite> 태그를 사용함. 저작물의 출처를 표기할 때 사용하는 태그, 제목을 반드시 포함해야 함)

• 형광펜 효과 주기 : <mark>

  • 형광펜으로 칠한 것처럼 하이라이트 된 텍스트를 정의할 때 사용합니다.
  • 이 태그는 인라인 태그입니다.

• 인용구 표시하기 : <q>, <blockquote>

  • <q> 태그를 사용하면 큰 따옴표가 생기게 됩니다.
  • <q> 태그는 텍스트가 짧은 인용구를 강조할 때 사용하게 됩니다.(줄 바꿈이 없는 짧은 경우)
  • <q> 태그는 인라인 태그입니다.
  • <blockquote> 태그는 보통 들여 쓰기를 사용하여 표현되게 됩니다.
  • <blockquote> 태그는 다른 출처로부터 인용된 블록을 정의할 때 사용합니다.(텍스트가 긴 인용문)
  • <blockquote> 태그는 블록 태그입니다.

• 아무 효과를 주지 않고 단순히 묶기만 하기 : <span>

  • 이 태그는 인라인 태그입니다.
  • 어떠한 가시적인 효과는 없습니다.
  • 스타일을 적용하기 위해서 또는 자바스크립트를 사용하기 위해서 따로 묶어 두고 싶은 영역을 묶을 때 사용합니다.