HTML에서 문단(Paragraph)은 <p> 태그를 사용하여 생성하는 텍스트 요소입니다. <p>는 대표적인 블록 레벨(block-level) 요소로, 항상 새 줄에서 시작하며 사용 가능한 전체 너비를 차지합니다. 또한 태그 앞뒤에 브라우저가 기본적으로 여백(margin)을 추가하기 때문에 문서의 가독성이 크게 향상됩니다.
문법(Syntax)
<p> 태그의 기본 문법은 다음과 같습니다.
<p>content</p>
주요 특징
- <p>는 블록 레벨 요소이므로 문단이 항상 새 줄에서 시작됩니다.
- 태그 내부에 연속된 공백이나 줄 바꿈이 있어도 브라우저는 이를 하나의 공백으로 처리합니다.
- 여러 문단을 표현하려면 각각 별도의 <p> 태그로 감싸야 하며, 빈 <p> 태그로 줄 간격을 만드는 것은 올바른 방법이 아닙니다.
- <p> 태그 안에는 다른 블록 레벨 요소를 넣을 수 없으며, 텍스트와 인라인 요소(<a>, <span>, <strong> 등)만 포함해야 합니다.
예제(Example)
아래는 HTML 문단을 활용한 간단한 예제 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML Paragraphs</h1>
<p>I'm a paragraph element with some dummy text.</p>
</body>
</html>
출력 결과(Output)
위 코드를 실행하면 그라데이션 배경 화면 중앙에 제목과 함께 문단 텍스트가 출력됩니다.
