이것 저것 개발 공부/HTML

[HTML] HTML 글자 태그란? 웹 페이지에서 텍스트를 표시하는 법

crushed-taro 2025. 3. 14. 14:22
728x90
반응형

[HTML] HTML이란? 웹 개발을 시작하는 필수 가이드

 

[HTML] HTML이란? 웹 개발을 시작하는 필수 가이드

[HTML] 렌더링 엔진의 동작 과정 완벽 정리 – 브라우저가 웹페이지를 표시하는 법 [HTML] 렌더링 엔진의 동작 과정 완벽 정리 – 브라우저가 웹페이지를 표시하는 법1. 브라우저의 동작1. 브라우저

crushed-taro.tistory.com

2. 글자 관련 태그

1. 제목

  • <h?></h?>
    • 제목을 입력할 떄 사용하는 태그
    • 폰트의 크기가 태그에 따라 정해져있다.
    • h태그 뒤 숫자로 구분한다.
    • 번호가 증가할 수록 크기가 작아진다.
h1 첫 번째로 큰 제목
h2 두 번째로 큰 제목
h3 세 번째로 큰 제목
h4 네 번째로 큰 제목
h5 다섯 번째로 큰 제목
h6 여섯 번째로 큰 제목

2. 단락과 줄바꿈

  • <br></br>
    • 문장을 줄 바꾸기(개행)할 때 사용하는 태그
  • <hr>
    • 페이지에 가로로 밑줄을 만들어 줄 때 사용하는 태그

3. 밑줄(수평)과 출력

  • <p></p>
    • 한 개의 단락을 만들 때 사용하는 태그
    • 자동으로 문장 개행 후 한 줄 공백을 준다.
  • <pre></pre>
    • 입력한 그대로 출력할 때 사용하는 태그
    • 띄어쓰기, 들여쓰기, 줄 바꿈이 입력된 그대로 출력된다.

4. 글자 형태 관련

  • <strong></strong>, <b></b>
    • 문장에서 문자를 강조하여 굵게 표시할 경우 사용하는 태그
  • <em></em>, <i></i>
    • 문장에 기울임을 주는 태그
  • <blockquote></blockquote>, <q></q>
    • 다른 블로그나 사이트의 글을 인용할 경우 사용하는 태그
    • 자동 들여쓰기가 되어 다른 텍스트와 구별할 수 있다.
  • <mark></mark>
    • 배경 부분이 형광펜처럼 노랑색으로 되게 할 경우 사용하는 태그
  • <u></u>
    • 해당 범위에 수평으로 줄을 표시하는 태그
  • <small></small>
    • 원 문자보다 작은 글씨로 표현하는 태그
    • 부가 정보 표현 시 자주 사용
  • <sub></sub>
    • 아래 첨자를 표시할 때 사용하는 태그
  • <sup></sup>
    • 윗 첨자를 표시할 때 사용하는 태그
  • <s></s>
    • 취소선을 표시하기 위해 사용하는 태그
  • <abbr></abbr>
    • 약자 표시와 함께 마우스가 문자에 있으면 설명이 출력되게 하는 태그
  • <code></code>
    • 컴퓨터 코드 인식을 위한 태그로 pre태그 내부에 작성하는 태그
  • <kbd></kbd>
    • 키보드 입력이나 음성 명령 같은 입력 내용 작성하는 태그
  • <cite></cite>
    • 웹 문서나 포스트에서 참고할 때 사용하는 태그이다.
    • 브라우저마다 상이하지만 크롬의 경우 이텔릭체(기울임꼴)로 표현된다.

5. 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 코드1 -->
    <h1>h1 태그입니다.</h1>
    <h2>h2 태그입니다.</h2>
    <h3>h3 태그입니다.</h3>
    <h4>h4 태그입니다.</h4>
    <h5>h5 태그입니다.</h5>

    <h6>h6 태그 &nbsp;  &nbsp; &nbsp;        
        
        
        
        입니다.</h6>

    <br>

    <h1>줄 바꼈나?</h1>
    
    <hr>

    <h3>문단을 나누는 태그</h3>
    <p>문단 영역을 나누는 태그로는 p태그와 pre태그가 있다. 
        p태그는 문단영역을 나누는 태그이지만 한 개의 공백만         표시하며 줄 바꿈 입력을 별도의
        태그로 지정해 주며 pre태그는 여러 칸 띄우기 혹은 줄 바꿈 등을 포함하여 내용 그대로 표현하는
        태그이다.</p>
    <pre>문단 영역을 나누는 태그로는 p태그와 pre태그가 있다. 
        p태그는 문단영역을 나누는 태그이지만 한 개의 공백만         표시하며 줄 바꿈 입력을 별도의
        태그로 지정해 주며 pre태그는 여러 칸 띄우기 혹은 줄 바꿈 등을 포함하여 내용 그대로 표현하는
        태그이다.</pre>
    <hr>

    <!-- 코드2 -->
    <h3>그 밖에 텍스트를 다루는 태그들</h3>
    일반글꼴
    <br>
    <strong>글자를 굵게 표시하는 태그</strong>
    <br>
    <b>글자를 굵게 표시하는 태그</b>
    <br>
    <em>글자를 기울이는 태그</em>
    <br>
    <i>글자를 기울이는 태그</i>
    <br>
    <mark>형광펜 효과를 나타내는 태그</mark>
    <br>
    <u>글자에 밑줄을 긋는 태그</u>
    <br>
    <small>글자를 작게 표시하는 태그</small>
    <br>
    기본 글자에 <sub>아래첨자</sub>를 나타내는 태그와 <sup>윗첨자</sup>를 나타내는 태그이다.
    <br>
    <s>글자에 취소선을 넣는 태그이다.</s>
    <br>
    <abbr title="Iternet of Things">IoT</abbr>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에
    연결하는 기술이다. 
    <br>
    <pre>
        function add(num1, num2) {
            var sum = num1 + num2;
            console.log(sum);
        }
    </pre>

    <blockquote cite="http://www.naver.com">인용 문구를 나타내는 태그</blockquote>

    <!-- 코드3 -->
    <hr>
    <h3>글자 관련 태그 응용</h3>
    <p>태그들은 해당 태그 내에서 중첩으로 사용 가능하다.<br>
    <strong>굵은</strong>글자를 사용할 수도 있고, <em>기울이거나</em>, <s>취소선</s>을 넣는 등
    다양하게 사용할 수 있다.</p>

</body>
</html>

6. 결과화면

글자관련태그

728x90
반응형