[HTML 기초] <p> 태그 : 단락 요소

2024. 12. 4. 15:01·기초 학습/HTML

<p> 태그

<p> 태그는 paragraph(단락) 을 뜻하는 태그이다. 주로 들여쓰기나 빈 줄로 구분되는 텍스트 단락을 표현하는 데 사용되지만, 텍스트 단락뿐만 아니라 단락처럼 묶고 싶은 내용이라면 어떤 것이든 <p> 태그로 묶을 수 있다.

ex) 텍스트뿐 아니라 이미지, 입력 필드 등을<p> 태그로 묶을 수 있다!

특징

1. 블록 레벨 요소 (Block-level Element)

<p> 태그는 블록 레벨 요소로, 기본값으로 상하에 여백이 생긴다.

  • 블록 레벨 요소란?
    기본적으로 부모 요소의 전체 너비를 차지하여 '블록'을 만드는 요소.
    화면에서 새 줄로 시작하며, 기본적으로 전체 너비를 차지한다.

2. 닫는 태그 자동 생략

<p> 태그는 닫는 태그(</p>)가 없더라도 브라우저가 자동으로 닫는 지점을 판단할 수 있다.
다만, 명시적으로 닫는 태그를 사용하는 것이 가독성과 유지보수성을 높일 수 있는 방법이다.

 

자동 닫힘 예시
<p>첫 번째 문단
<p>두 번째 문단

'기초 학습 > HTML' 카테고리의 다른 글

[HTML 기초] 이미지 요소 - <img>  (2) 2024.12.05
[HTML 기초] 앵커 태그 - <a>  (0) 2024.12.05
[HTML 기초] 목록 태그 (<ol>, <ul>, <li> )  (0) 2024.12.05
[HTML 기초] HTML 상용구 - 필수 구조  (2) 2024.12.04
[HTML 기초] <h1> - <h6> : 제목 태그  (0) 2024.12.04
'기초 학습/HTML' 카테고리의 다른 글
  • [HTML 기초] 앵커 태그 - <a>
  • [HTML 기초] 목록 태그 (<ol>, <ul>, <li> )
  • [HTML 기초] HTML 상용구 - 필수 구조
  • [HTML 기초] <h1> - <h6> : 제목 태그
뜐🐸
뜐🐸
패왕색 패기를 갖춘 뜐입니다~
  • 뜐🐸
    뜐의 개발 로그
    뜐🐸
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 기초 학습
        • HTML
        • CSS
        • JavaScript
        • Version Co..
        • 미니 프로젝트
        • DOM & 웹 AP..
      • CSS 프레임워크
        • Bootstrap
      • React
        • 개념 정리
        • 기초 정리
      • 알고리즘
        • Week 1: 입출..
        • 재귀
        • 백트래킹
      • javascript
      • FastAPI
        • 크롤링 서버 만들기
      • 전역 상태 관리
        • Redux
      • 한 입 리액트 챌린..
      • 영어
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글쓰기
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    오블완
    :hover
    가상 선택자
    백준 #코딩테스트 #1074번 #재귀 #알고리즘 # 알고리즘 문제풀이
    inline-block
    :active
    :nth-child(n)
    자바스크립트 #하노이 탑 #재귀 #백준 # 11729
    티스토리챌린지
    :focus
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
뜐🐸
[HTML 기초] <p> 태그 : 단락 요소
상단으로

티스토리툴바