HTML의 문단 태그 <p> 제대로 이해하기
HTML을 막 배우기 시작했다면 가장 먼저 마주하게 되는 태그 중 하나가 바로 <p>입니다. 문단을 나누는 역할을 한다고 간단히 설명되지만, 실제로는 꽤 다양한 기능과 규칙이 숨어 있습니다.
특히 콘텐츠를 보기 좋게 구성하는 데 중요한 역할을 하며, CSS와의 조합을 통해 웹페이지의 전체적인 분위기까지 바꿔줄 수 있어요. 그런데 많은 초보자들이 이 단순한 태그에서 오해를 하거나, 무심코 실수하기 쉽다는 점도 함께 알아야 합니다.
이번 포스트에서는 <p> 태그에 담긴 진짜 의미와 함께, 초보자도 실수 없이 활용할 수 있도록 풍부한 예제와 함께 5가지 핵심 포인트로 정리해볼게요.
Step 1. 문단을 나누는 기본 태그 <p>
<p>는 문장을 하나의 덩어리로 묶어 웹페이지에 문단처럼 표현해주는 태그입니다. 단순히 줄을 바꾼다고 해서 문단이 생기는 건 아니며, <p>를 써야 웹 브라우저가 이 부분을 하나의 문단으로 인식하게 됩니다.
<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다.</p>렌더링 결과:
이것은 첫 번째 문단입니다.
(줄바꿈)
이것은 두 번째 문단입니다.
Step 2. 줄바꿈과 문단은 다르다
많은 초보자들이 ‘Enter를 치면 문단이 나뉘겠지?’라고 생각하지만, HTML에서는 줄바꿈과 문단 구분이 명확합니다.
줄바꿈만 원한다면 <br> 태그를, 문단 구분을 원한다면 <p> 태그를 사용해야 해요.
<p>첫 줄입니다.<br>여긴 같은 문단이지만 줄만 바꾼 거예요.</p>렌더링 결과:
첫 줄입니다.
여긴 같은 문단이지만 줄만 바꾼 거예요.
Step 3. 빈 줄과 공백으로 문단을 만들 수 있을까?
HTML에서는 엔터키를 눌러 빈 줄을 만들거나 띄어쓰기 여러 번으로 문단을 만들 수 없어요. 브라우저는 연속된 공백을 하나로 처리하기 때문이죠.
문단을 구분하고 싶다면 반드시 <p> 태그로 감싸야만 합니다.
문단1 문단1 문단1
문단2 문단2 문단2렌더링 결과:
문단1 문단1 문단1 문단2 문단2 문단2
(줄바꿈이 없음!)
Step 4. 중첩 사용은 불가능! 중복 사용의 예외 처리
<p>는 자기 안에 또 다른 <p>를 중첩할 수 없습니다. 그렇게 작성하면 구조적으로 잘못된 HTML이 되어 브라우저가 예외적으로 처리하긴 해도 의도대로 동작하지 않을 수 있어요.
<p>첫 문단 시작<p>잘못된 중첩입니다</p></p>렌더링 결과:
브라우저마다 다르게 표현되며, HTML 검사에서 오류로 잡힙니다.
Step 5. CSS와 함께 쓰면 더 매끄럽게!
<p> 태그는 CSS와 함께 사용하면 더욱 다양한 문단 스타일을 연출할 수 있어요. 예를 들어 글자 간격, 여백, 줄 간격 등을 조절하면서 사용자에게 읽기 편한 디자인을 제공할 수 있습니다.
p {
line-height: 1.8;
margin-bottom: 1.5em;
}렌더링 결과:
글 줄 간격이 넓어지고 문단 아래에 여백이 생겨 가독성이 향상됩니다.
마무리하기
<p> 태그는 그저 줄을 바꾸는 용도로만 생각하기 쉽지만, 실제로는 문서의 가독성을 책임지고 콘텐츠의 흐름을 자연스럽게 연결해주는 중요한 태그입니다.
특히 CSS와 결합했을 때는 시각적으로 깔끔한 문단 구조를 제공해 사용자 경험을 높이는 데도 큰 역할을 하죠. 오늘 소개한 다섯 가지 항목을 익히고 실전에서 잘 활용한다면, HTML 기본기를 한층 더 탄탄히 다질 수 있을 거예요. 다음 포스트에서는 또 다른 핵심 태그를 함께 파헤쳐볼게요!