[HTML5] 문장을 하나의 단락으로 만들어 주는 <p>and</p>

2023. 10. 3. 13:54HTML5

`<p>` 요소를 사용하여 텍스트 단락을 정의합니다. 웹페이지의 텍스트 콘텐츠를 구조화하고 서식을 지정하기 위해 가장 기본적이고 일반적으로 사용되는 블록 수준 요소 중 하나입니다.

`<p>` 요소를 사용하는 방법은 다음과 같습니다.

<p>텍스트 단락입니다.</p>

 

`<p>` 요소에 대해 이해해야 할 주요 사항:

1. 블록 수준 요소: `<p>`는 블록 수준 요소입니다. 즉, 콘텐츠에 대한 블록 수준 컨테이너를 생성한다는 의미입니다. 블록 수준 요소는 일반적으로 새 줄에서 시작하여 상위 컨테이너의 전체 너비로 확장됩니다.

2. 텍스트 콘텐츠: `<p>` 요소의 주요 목적은 텍스트 콘텐츠를 포함하고 형식을 지정하는 것입니다. 이를 사용하여 일관된 단위를 형성하는 문장이나 텍스트 그룹인 단락을 만들 수 있습니다.

3. 공백 처리: 브라우저는 단락 위와 아래에 세로 간격(여백)을 자동으로 추가하여 페이지의 다른 콘텐츠와 시각적으로 구분합니다. CSS를 사용하여 이 간격을 조정할 수 있습니다.

4. 중첩 요소: `<p>` 요소 내에 링크, 강조 태그, 이미지 등과 같은 다른 인라인 및 블록 수준 요소를 중첩하여 풍부한 형식의 단락을 만들 수 있습니다.

중첩된 요소의 예:

<p>
  <a href="#">링크</a>와 <em>강조된 텍스트</em>가 포함된 텍스트 단락입니다.
</p>

링크강조된 텍스트가 포함된 텍스트 단락입니다.


5. 의미적 마크업: `<p>` 요소는 콘텐츠에 의미적 의미를 제공합니다. 이는 브라우저와 검색 엔진 모두에게 포함된 텍스트가 단일 단락을 나타냄을 알려 접근성과 검색 엔진 최적화를 돕습니다.

6. 스타일링: CSS를 사용하여 단락 스타일을 지정하고 글꼴 크기, 줄 간격, 텍스트 정렬 등과 같은 속성을 조정할 수 있습니다.

CSS 예:

p {
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  color: #333;
}


요약하자면 `<p>` 요소는 웹페이지에서 텍스트 콘텐츠를 구성하고 표시하는 데 필수적입니다. 가독성과 접근성을 위해 콘텐츠를 구조화하는 데 도움이 되는 다양하고 널리 사용되는 요소입니다.