p 태그 -단락(paragraph)

HTML의 <p> 태그는 **단락(paragraph)**을 정의하는 데 사용되는 기본적인 시맨틱 요소입니다. 주로 텍스트 내용을 그룹화하여 하나의 단락을 만들 때 사용되며, 글의 흐름을 구분하고 읽기 쉽도록 하는 역할을 합니다.

주요 특징:

1. 단락 구분: <p> 태그는 하나의 단락을 나타내며, 단락을 구분하는 역할을 합니다. 이 태그를 사용하면 텍스트를 의미 있는 블록으로 나눌 수 있습니다.
2. 자동 여백: 브라우저는 <p> 태그를 사용하여 만든 단락들 사이에 기본적으로 상하 여백을 자동으로 추가하여, 텍스트를 읽기 쉽게 만듭니다.
3. 시맨틱 태그: <p>는 의미론적(시맨틱) HTML 태그로, 텍스트의 구분을 명확하게 하고, 검색 엔진과 스크린 리더가 텍스트를 더 잘 이해할 수 있도록 도와줍니다.

사용 예시:

<p>HTML은 웹 페이지를 만들기 위한 기본적인 마크업 언어입니다.</p>
<p>CSS는 웹 페이지의 스타일을 정의하는 스타일 시트 언어입니다. 이를 통해 색상, 레이아웃, 폰트 등을 제어할 수 있습니다.</p>
<p>JavaScript는 웹 페이지에서 동적인 기능을 구현하는 프로그래밍 언어입니다.</p>

설명:

• <p> 태그는 각 단락을 정의하는 데 사용됩니다.
• 각 단락은 <p>로 감싸져 있으며, 자동으로 위와 아래에 여백이 추가됩니다.

스타일링 예시 (CSS):

<p style="font-size: 18px; line-height: 1.5; color: #333;">
  HTML은 웹 페이지를 구성하는 언어로, 웹 브라우저가 해석하여 화면에 표시합니다.
</p>

위 예시에서는 CSS를 사용하여 <p> 태그로 감싸진 단락의 글꼴 크기, 줄 높이, 글자 색을 변경했습니다.

<p> 태그 사용 시 주의사항:

1. 중첩된 <p> 태그 사용 금지: <p> 태그는 다른 <p> 태그 안에 중첩해서 사용할 수 없습니다. 하나의 단락을 정의할 때마다 각각 독립적인 <p> 태그를 사용해야 합니다.

   <p>이것은 첫 번째 단락입니다. <p>두 번째 단락이 여기에 포함됩니다.</p></p>
   

   올바른 예시:
2. <p>이것은 첫 번째 단락입니다.</p> <p>두 번째 단락입니다.</p>
3. 잘못된 예시:
4. 단락 끝에 불필요한 공백 없음: <p> 태그를 닫지 않고 다른 태그를 사용하면 HTML이 예상치 않게 동작할 수 있습니다. 따라서 <p> 태그는 올바르게 열고 닫아야 합니다.

결론:

<p> 태그는 단락을 정의하는 데 사용되는 시맨틱 HTML 요소로, 텍스트를 구분하고 웹 페이지에서 읽기 쉽게 만드는 역할을 합니다. 각 단락은 <p> 태그로 감싸며, 이 태그는 자동으로 상하 여백을 추가하여 텍스트를 구분합니다. 텍스트의 스타일을 조정하려면 CSS를 사용하여 font-size, line-height, color 등의 속성을 추가할 수 있습니다.