FE/HTML

[HTML] 글자 관련 기본 태그

kKkKkKWJ 2024. 6. 1. 15:54

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

HTML에는 다양한 태그가 있다.

특히 사용자에게 보여지는 body태그 안에는 다양한 태그가 들어갈 수 있다.

 

가장 기본적으로 사용되는 글자 태그들에 대해서 알아보고자 한다.

 

1. 제목 태그

제목태그는 제목을 의미하며, h1부터 h6까지 존재한다. h1이 가장 큰 제목 태그이고 h6이 가장 작은 제목 태그이다.

 

<body>
  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <h4>This is heading 4</h4>
  <h5>This is heading 5</h5>
  <h6>This is heading 6</h6>
</body>



2. 단락태그 <p>

하나의 단락을 의미한다. 하나의 단락이 끝나면 자동으로 줄바꿈이 된다.

title 속성을 사용하면 커서가 구문 위에 있을 때 뜨는 텍스트를 설정할 수 있다.

조금 독특한 점은, p태그 안에서 공백을 여러번 입력해도 하나로 인식한다는 점이다.

<body>
  <p>This is a paragraph.</p>
  <p title="I'm a tootip">This is another paragraph.</p>
</body>

 

 

3. <pre> 태그

p태그는 코드 상에 단락을 다르게 작성해도 한 줄로 출력한다.

하지만 pre태그를 사용하면 코드 상에 이력한 형태로 출력된다.

<body>
  <p>            This is a p tag.</p>
  <pre>            This is a pre tag.</pre>
</body>

 

4. 줄바꿈 태그 <br> 

줄을 바꾸어주는 태그이다. 요소를 포함하지 않는 태그이다.

또한, 다른 태그 내에 삽입이 가능하다.

<body>
  <p>first line.<br/>second line.</p>
</body>

 

5. 수평 줄 태그 <hr>

  가로 구분선을 추가한다. 요소를 포함하지 않는 태그이다.

<body>
  <p>first line.</p>
  <hr/>
  <p>second line.</p>
</body>

 

6. 앵커태그 <a>

링크 태그이며 외부 링크로 연결한다.

href 속성 : 연결할 링크를 정의한다. id=index인 html 내의 객체에도 "#index" 속성값을 이용하여 링크할 수 있다.

target 속성 : 링크된 문서를 어디에서 열 지 지정하는 속성이다.

더보기

_self(기본값) : 링크된 문서를 현재 창이나 탭에서 연다.

_blank : 링크된 문서를 새로운 창이나 탭에서 연다.

_parent : 링크된 문서를 부모 프레임에서 연다. 부모 프레임이 없으면 _self와 동일하게 작동한다.

_top : 링크된 문서를 전체창의 최상위에서 연다.

<body>
  <a href="https://www.w3schools.com" title="w3schools">This is a link</a>
</body>

추가로, 이미지를 링크로 연결하고 싶다면 a태그 안에 img 태그를 넣으면 된다.

 

7. 글자 모양 태그

<strong>태그와 <b>태그

 : 글자를 굵게 표시해준다. <b>태그는 단순히 글자를 굵게만 해주고, <strong>태그는 중요성도 함께 포함하여 접근성을 높여준다.

 

<i>태그와 <em>태그

 : 텍스트를 기울임꼴로 표시한다. <em>태그는 중요성도 함께 포함한다.

 

<del>태그와 <ins>태그

 : <del>태그는 지워진 문장을 의미하고, <ins>태그는 삽입된 문장을 의미한다.

 

<sub>태그와 <sup> 태그

 : <sub> 태그는 하위 문자를 나타내고, <sup> 태그는 상위 문자를 나타낸다.

<body>
  <p>This is a <strong>very important</strong> word.</p>
  <p>This text is <em>important</em> using the em tag.</p>
  <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
  <p>Water is written as H<sub>2</sub>O.</p>
  <p>Einstein's famous equation is E = mc<sup>2</sup>.</p>
</body>