<p>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <p>
요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
문단은 블록 레벨 요소이며, 자신의 닫는 태그(</p>
) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.
시도해보기
콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠 |
---|---|
가능한 콘텐츠 | 구문 콘텐츠. |
태그 생략 |
시작 태그는 필수입니다. 닫는 태그는 <p> 요소의
바로 뒤에 <address> ,
<article> , <aside> ,
<blockquote> , <div> ,
<dl> , <fieldset> ,
<footer> , <form> ,
<h1> , <h2> ,
<h3> , <h4> ,
<h5> , <h6> ,
<header> , <hr> ,
<menu> , <nav> ,
<ol> , <pre> ,
<section> , <table> ,
<ul> , <p> 요소가
위치하는 경우, 또는 부모 태그의 콘텐츠가 더 존재하지 않고 부모가
<a> 요소가 아닐 때 생략할 수 있습니다.
|
가능한 부모 | 플로우 콘텐츠를 허용하는 모든 요소 |
가능한 ARIA 역할 | 모두 |
DOM 인터페이스 | HTMLParagraphElement |
특성
이 요소는 전역 특성만 포함합니다.
예제
HTML
<p>첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.</p>
결과
문단 꾸미기
브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 CSS를 통해 사용할 수 있습니다.
HTML
<p>
독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만, 첫 줄
들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서 공간과 종이를
아끼기 위해 사용합니다.
</p>
<p>
학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다.
그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.
</p>
<p>
아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로
구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.
</p>
<p>
얼마나 읽기 힘들까요? 직접 알아보세요.
<button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button>
</p>
CSS
p {
margin: 0;
text-indent: 3ch;
}
p.pilcrow {
text-indent: 0;
display: inline;
}
p.pilcrow + p.pilcrow::before {
content: " ¶ ";
}
JavaScript
document.querySelector("button").addEventListener("click", function (event) {
document.querySelectorAll("p").forEach(function (paragraph) {
paragraph.classList.toggle("pilcrow");
});
var newButtonText = event.target.dataset.toggleText;
var oldText = event.target.innerText;
event.target.innerText = newButtonText;
event.target.dataset.toggleText = oldText;
});
결과
접근성 고려사항
콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.
빈 <p>
요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.
여분의 공간이 필요하다면 margin
등 CSS 속성을 통해 적용하세요.
p {
margin-bottom: 2em; /* 문단 다음 여백을 늘림 */
}
명세
Specification |
---|
HTML Standard # the-p-element |
브라우저 호환성
BCD tables only load in the browser