자습서/HTML

HTML 단락 태그

2023. 5. 14. 13:09
목차
  1. <p> 태그
  2. <h>태그
  3. <br> 태그
  4. <hr> 태그

<p> 태그

HTML 단락 태그는 웹 페이지에서 문장이나 문단을 만들 때 사용하는 태그입니다. 단락태그를 이용하여, 문서의 내용을 적절하게 구성하고 가독성을 높일 수 있습니다.

 

가장 기본적인 단락 태그는 <p> 태그입니다. <p> 태그는 "paragraph"의 약어로, 단락을 나타냅니다. 이 태그를 이용하여 문장이나 문단을 구분하여 작성할 수 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

<p>안녕하세요. 저는 메타보드입니다.</p>
<p>그리고 이것은 단락 태그인 <p>태그로 작성되었습니다.</p>

위 코드를 실제로 작성하여 웹 페이지에서 확인하면 다음 이미지처럼 보입니다.

코드샌드박스를 사용하여 직접 연습해보세요!


<h>태그

우리가 이전에 배운 제목 태그 또한 단락에 사용됩니다. 제목을 나타내기 위해서는 <h1> ~ <h6> 태그를 이용할 수있습니다. <h1>태그가 가장 큰 제목이며, 숫자가 작아질수록 작은 제목을 나타냅니다. 제목 태그는 이미 배운 내용이므로 자세한 내용이 필요한 경우 아래 페이지를 참고해주세요.

 

HTML 제목 태그 - Heading Tag

HTML 제목 태그(Heading Tag)는 문서의 제목을 나타내는 태그입니다. 제목 태그는 h1부터 h6까지 총 6개의 태그가 있으며, 숫자가 작을수록 더 큰 제목을 나타냅니다. 보통 사람들은 가장 쉬워서 먼저

meta-board.net


<br> 태그

HTML에서 <br> 태그는 줄바꿈을 나타내는 태그입니다. "br"은 "break"의 약어이며, 글자가 아닌 새로운 라인을 시작하는 데 사용됩니다. <br> 태그는 닫는 태그가 없으며, 내용(content)을 가지지 않습니다. 이 태그는 한 줄에서 다음 줄로 넘어갈 때 사용됩니다.

예를 들어, 다음과 같이 작성할 수 있습니다.

<p>안녕하세요. 메타보드입니다. <br> 이 태그를 사용하면 어떻게 표시될까요?</p>

위 코드를 실제로 웹 페이지에서 확인하면 아래 이미지처럼 표시됩니다.


<hr> 태그

HTML에서 <hr> 태그는 수평선을 삽입하는 태그입니다. "hr"은 "horizontal rule"의 약어이며, 페이지의 컨텐츠를 나누는 데 사용됩니다. <hr> 태그는 일반적으로 섹션 간의 구분 또는 두 개의 주제를 나누는 데 사용됩니다.

 

또한, 웹 페이지에서 시각적인 구분을 주기 위해 사용할 수도 있습니다. <hr> 태그는 닫는 태그가 없습니다. 또한, 이 태그는 대부분의 브라우저에서 기본적으로 스타일링되어 표시되므로 추가적인 스타일링이 필요하지 않습니다.

 

다음은 <hr> 태그를 사용한 예시 코드입니다.

<h1>웹 디자인</h1>
<p>웹 디자인에 대한 간단한 소개입니다.</p>
<hr>
<h2>그래픽 디자인</h2>
<p>웹 디자인에서 그래픽 디자인의 역할에 대한 설명입니다.</p>

실제로 웹 페이지에서 확인하면 아래 이미지처럼 보입니다.


이렇게 웹 페이지에서 사용되는 단락을 구분하는 태그에 대해 배웠습니다. 단락을 잘 구성하는 것을 글이나 책을 쓸 때도 중요한 것처럼 웹 페이지를 제작할 때 단락을 효과적이고 정확하게 구분하는 것은 웹 페이지 가독성에 큰 영향을 미칩니다.

  1. <p> 태그
  2. <h>태그
  3. <br> 태그
  4. <hr> 태그
'자습서/HTML' 카테고리의 다른 글
  • HTML 인용구 - Quotation
  • HTML 서식 태그 - Text Formatting Tags
  • HTML 제목 태그 - Heading Tag
  • HTML의 요소, 태그 및 속성
메타보드
메타보드
메타보드는 다양한 학습을 위한 자습서 및 예제를 제공합니다. 궁금한 점이나 요청사항은 댓글 게시판 및 방명록을 통해 언제든지 공유해주세요.

블로그 메뉴

  • 홈
  • 방명록
  • 분류 전체보기
    • 자습서
      • HTML
      • CSS
      • JavaScript
    • 웹 애플리케이션

태그

인기 글

메타보드
HTML 단락 태그
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.