Programming Language/Javascript, ...

[HTML5] 글자와 관련된 태그

Ma_Sand 2022. 4. 7. 09:39
반응형

글자 크기 태그 : <h1>~<h6>

<!DOCTYPE html>
<html>
    <head>
        <title>글자 크기</title>
    </head>

    <body>
        <h1>태그</h1>
        <h2>태그</h2>
        <h3>태그</h3>
        <h4>태그</h4>
        <h5>태그</h5>
        <h6>태그</h6>
    </body>
</html>

 글자 크기 태그는 <h1>부터 <h6>까지 있으며, <h1>이 가장 큰 글자이고 <h6>이 가장 작은 글자이다.

 만약 <h7>을 사용하면 <h7>은 존재하지 않는 태그이므로 기본 글자 크기로 출력이 된다.

 

 

 

구분선 태그 : <hr>

<!DOCTYPE html>
<html>
    <head>
        <title>구분선</title>
    </head>

    <body>
        <h2>구분선</h2>
        <hr>
        <h4>위는 구분선</h4>
    </body>
</html>

 <hr>로 구분선을 만들 수 있다. <hr><hr>로 작성하면 구분선이 두 줄 생긴다.

 

 

 

문단 나누는 태그 <p>, <pre>

<!DOCTYPE html>
<html>
    <head>
        <title>문단 나누기</title>
    </head>

    <body>
        <p>
            이것은 문단 영역을 나누는 p 태그이다.<br>
            줄바꿈을 할 땐 줄바꿈 태그를 사용해야 한다.<br>
            하나의 공백만 표시할 수 있어서 별도의 기호 문구를 작성해야 한다.
        </p>
        
        <pre>
            이것은 문단 영역을 나누는 pre 태그이다.
            줄바꿈 태그를 사용하지 않아도 줄바꿈이 된다.
            여러 개의 공백을 표시할 수 있다.
        </pre>
    </body>
</html>

 <p>와 <pre>는 문단을 나누는 태그이다. 이때 각각 특징이 다르다.

 <p>는 줄바꿈을 할 때 <br>이라는 줄바꿈 태그를 사용해야 한다. 그리고 공백은 하나만 표시할 수 있어서 여러 개의 공백을 사용하려면 별도의 기호 문구를 작성해야 한다.

 <pre>는 <br>을 사용하지 않아도 알아서 줄바꿈 처리가 되고, 공백도 공백을 입력한 수만큼 그대로 출력이 된다.

 

 

 

이외의 글자 관련 태그

 

 ① 글자를 굵게 표시하는 태그 <b>, <strong>

   ⓐ <b>: 굵은 글자로 표시한다.

   ⓑ <strong>: <b>와 같이 굵은 글자로 표시를 한다. 이때 <strong>은 스크린 리더에서 좀더 강조하여

                      말하고자할 때 사용한다.

 

 

 ② 글자를 기울여 표시하는 태그 <i>, <em>

   ⓐ <i>: 글자를 기울여서 표시한다.

   ⓑ <em>: <i>와 같이 글자를 기울여 표시한다. 이때 <em>은 스크린 리더에서 강조하여 말하고자할 때

                  사용한다.

 

 

 ③ 형광펜 표시하는 태그 <mark>

 

 

 ④ 밑줄 표시하는 태그 <u>

 

 

 ⑤ 취소선을 표시하는 태그 <s>, <del>

   - <strike>도 취소선을 표시하는 태그이긴 하지만, html5에서 더이상 지원하지 않으므로 권장하지 않는다.

 

 

 ⑥ 글자를 작게/크게 표시하는 태그 <small>, <big>

   - <small>: 글자를 작게 표시한다.

   - <big>: 글자를 크게 표시한다. <big>은 html5에서 더이상 지원하지 않으므로 CSS로 변경하는 것을 권장한다.

 

 

 ⑦ 단어의 축약형이나 머리글자로만 된 단어를 정의할 때 쓰는 태그 <addr>

   - 단어에 커서를 갖다대면 속성값이 보인다.

 

 

 ⑧ 기본 글자에 아래첨자/윗첨자를 표시하는 태그 <sub>, <sup>

   ⓐ <sub>: 기본 글자에 아래첨자를 표시한다.

   ⓑ <sup>: 기본 글자에 윗첨자를 표시한다.

반응형