HTML 기초 2편 - 텍스트 태그

이번 포스팅에서는 저번에 이어서 프론트엔드에서 사용되는 HTML에서 텍스트를 표시하는데 사용되는 태그를 정리해봤습니다.

저번에 작성한 HTML의 구조와 이론에 대한 포스팅이 궁금하신분은 아래를 읽어보시면 좋습니다!

HTML 기초 1편 - HTML 구조와 이론

이번에는 프론트엔드에서 사용하는 HTML에 대해 공부하고 정리한 내용을 올리려 합니다. 백엔드 개발자를 지망하지만 전체적인 흐름을 아는것이 중요하다 생각해 프론트엔드 공부도 같이 하고

mlngwandev.tistory.com

텍스트 표시

특징

엔터는 일반적으로 '줄바꿈'을 의미하지만, HTML에서는 무시한다.
스페이스를 통한 공백도 한 번만 인식한다.

종류

p (문단) 태그

문단 요소를 나타내는 태그이다.
가장 많이 사용되는 텍스트 태그이다.
하나의 p태그는 하나의 문단을 표현한다.
문단과 문단 사이에는 공백이 존재한다.

사용 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>문단을 나타내는 태그입니다!</p>
    <p>문단과 문단 사이는 공백이 있습니다!</p>
  </body>
</html>

결과

문단과 문단 사이에는 공백이 존재한다는 것도 알수있다. (적색 부분)

h (제목) 태그

제목 요소를 나타내는 태그이다.
1부터 6까지 숫자와 함께 사용된다.
숫자가 1일때 가장 크며 숫자가 6일때 가장 작다.

사용예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>가장 큰 제목을 나타내는 태그입니다!</h1>
    <h2>제목을 나타내는 태그입니다!</h2>
    <h3>제목을 나타내는 태그입니다!</h3>
    <h4>제목을 나타내는 태그입니다!</h4>
    <h5>제목을 나타내는 태그입니다!</h5>
    <h6>가장 작은 제목을 나타내는 태그입니다!</h6>
  </body>
</html>

결과

순서대로 크기가 다름을 확인할수 있다.

hr (수평선) 태그

수평선을 표시하는 태그이다.
주제 변경 or 내용 구분을 위해 주로 사용되는 태그이다.

사용 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>수평선 태그를 위한 문단입니다.</p>
    <hr />
    <p>이렇게 위와 아래가 구분이 됩니다.</p>
  </body>
</html>

결과

선이 하나가 생겨 위와 아래 구분이 되는것을 알수있다.

줄바꿈 (br) 태그와 공백 문자

줄바꿈을 담당하는 태그이다.
공백을 두 번 이상 표시하고 싶으면 &nbsp를 사용한다.

HTML의 줄바꿈과 공백
줄바꿈으로 일반적으로 사용되는 엔터는 HTML에서 무시한다!
공백으로 일반적으로 사용되는 스페이스바는 HTML에서 한 번만 인식한다!

사용예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p> 공   백을 스페이스바 세번으로 나타냈을때</p>
     <p>공&nbsp&nbsp&nbsp백을 공백문자로 나타냈을때
    </br>줄바꿈</br>입니다.</p>
  </body>
</html>

결과

스페이스바로 공백을 세번 입력해도 한번만 인식하지 않는다!

줄바꿈을 하려면 </br> 태그를 해당 부분 앞에 사용해줘야 한다.

텍스트를 나타내는 기본적인 태그 세가지에 대해 알아보았습니다.

다음 편에는 블록 레벨 요소 / 인라인 요소로 구분되는 태그들에 알아보겠습니다.

저작자표시 비영리 변경금지 (새창열림)

'Dev > Frontend' 카테고리의 다른 글

HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0)	2023.07.09
HTML 기초 5편 - 전역 속성 (0)	2023.07.08
HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0)	2023.07.07
HTML 기초 3편 - 블록 요소 / 인라인 요소로 구분되는 태그 (0)	2023.07.06
HTML 기초 1편 - HTML 구조와 이론 (0)	2023.06.27