2023. 10. 3. 13:54ㆍHTML5
`<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>` 요소는 웹페이지에서 텍스트 콘텐츠를 구성하고 표시하는 데 필수적입니다. 가독성과 접근성을 위해 콘텐츠를 구조화하는 데 도움이 되는 다양하고 널리 사용되는 요소입니다.
'HTML5' 카테고리의 다른 글
| [HTML5] 홈페이지 소개 <header> (0) | 2023.10.04 |
|---|---|
| [HTML5] 목록을 만들어 주는 <ol>and</ol>, <li>and</li> (1) | 2023.10.03 |
| [HTML5] 드롭다운 메뉴 <select><option value="option1">옵션1</option></select> (0) | 2023.10.01 |
| [HTML5] 나이(숫자) 입력 양식 폼 <type="number"> (0) | 2023.10.01 |
| [HTML5] 이메일 양식 폼 <input type="email"> (0) | 2023.10.01 |