[HTML] p 태그 - 줄바꿈

728x90

목 차

• 1. p 태그란?
• 2. p 태그의 주요 특징
• 3. CSS 스타일 적용하기
• 4. 자주 사용하는 속성

반응형

 

1. p 태그란?

• <p> 태그는 HTML에서 단락(Paragraph)을 나타내기 위해 사용되는 태그입니다. 기본적으로 텍스트를 블록 레벨 요소로 나타내며, 내용이 끝나면 자동으로 줄 바꿈이 포함됩니다.

 

---

 

2. p 태그의 주요 특징

• 블록 레벨 요소: <p> 태그는 블록 레벨 요소로, 이 태그로 감싼 내용은 기본적으로 다른 콘텐츠와 분리되어 줄바꿈이 적용됩니다.
• 자동 여백: 브라우저에서 <p> 태그는 기본적으로 위아래에 여백을 주기 때문에, 단락 간에 간격이 자동으로 생깁니다.
• 중첩 불가: HTML5에서는 <p> 태그 안에 또 다른 <p> 태그를 중첩해서 사용하면 오류가 발생할 수 있습니다. 한 단락은 하나의 <p> 태그로 끝내야 합니다.
• 폐쇄형 태그: <p> 태그는 열고 닫는 태그가 반드시 있어야 합니다. <p>내용</p> 형태로 사용합니다.
• 스타일링: <p> 태그는 CSS를 통해 다양한 스타일링이 가능합니다. 글자 크기, 색상, 줄 간격, 여백 등을 변경할 수 있습니다.

<p>This is a paragraph of text. The browser will automatically add spacing before and after the paragraph.</p>
<p>Another paragraph with different content. It will also have some margin around it.</p>

 

---

 

3. CSS 스타일 적용하기

<style>
  p {
    color: blue;
    font-size: 18px;
    line-height: 1.5;
    margin: 10px 0;
  }
</style>

<p>This is a blue paragraph with a custom font size and line height.</p>

 

---

 

4. 자주 사용하는 속성

• align 속성 (deprecated): 과거에는 <p align="center">처럼 정렬을 지정할 수 있었지만, 현재는 CSS를 사용하는 것이 권장됩니다.

<p style="text-align: center;">This is a centered paragraph.</p>

 

• id 및 class: 특정한 단락에 스타일이나 동작을 적용하기 위해 사용됩니다.

<p id="intro">Introduction paragraph.</p>
<p class="highlight">This paragraph will have special styling.</p>

 

---

 

관련글

• [HTML] a태그 noopener와 noreferrer 정리
• [HTML] a 태그
• [HTML] script 태그