p태그는 html5에서 문단을 표시한다. 문장은 문장의 집합이고, 문장은 구와 절의 집합이다. p태그는 하나의 작은 주제를 표현하는 단위이다. 쉽게 말해 그냥 문단이다. 신문이나 웹페이지의 긴 기사들을 보면 긴 길을 여러 문단으로 나누고 있다. 문단으로 나누는 이유는 기승전결, 원인과 결과를 구분하여 읽기 쉬운 글을 만들기 위함이기도 하다.
html5 p 문단 태그 사용하기
컨텐츠의 문단을 구분 using html5 p tag
html5의 태그를 아는 것도 좋지만 의미를 아는 것도 중요하다.
태그의 의미도 너무 많이 알려고 하면 피곤하다.
혹자는 seo에 따라야 한다고도 하지만 굳이 그정도까지는 알 필요는 없다.
다만, seo까지 신경써야 한다면 웹페이지부터 먼저 만들고 천천히 업데이트를 하자.
일단 p 태그가 무엇인지 살펴본다.
p 태그는 문단, 단락, 절을 구분한다.
쉽게 웹페이지의 컨텐츠들의 문단을 구분하는 기능을 한다.
문단 구분 p 태그
p 태그는 대표적으로 문단을 웹페이지에 표시한다.
문단이란 문장들의 집합을 말한다.
문장은 구와 절을 말한다.
즉, 어떤 주제에 관련된 상세한 내용을 문장으로 기술하고 이 문장들이 모여서 문단을 이룬다.
p 태그는 이런 문단을 나타내는데 사용된다.
p 태그 특징
문단 태그를 나타내는 p 태그는 여러가지 문장들이 들어가 있다.
국내의 웹사이트하고는 다르게 외국의 사이트들을 보면 쉽게 알 수 있다.
여러 문장이 길게길게 나열되어 있다.
국내의 웹사이트는 하나의 문장마다 엔터를 치는 것과는 다르다.
p 태그는 항상 새로운 줄에서 시작하고 블록형태를 가진다.
또한 p 태그 내부에 있는 문장들이 있을 경우 엔터 또는 빈란 등은 무시되는 것들이 존재하기도 한다.
샘플코드
P 태그가 문단을 구성한다는 점에 집중하자.
특징까지 많이 알면 피곤해 진다.
웹페이지를 먼저 만들고 나서 자세한 것은 수정하면 된다.
코드를 보자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<p>
이것은 문단입니다.
문단은 여러 줄을 답을 수도 있고
여러 문장을 가질 수 있습니다.
그러나, 이런 문장들의 구성을
웹브라우저는 무시합니다.
</p>
<p>
이것은 문단입니다.
문단은 여러 줄을 답을 수도 있고
여러 문장을 가질 수 있습니다.
그러나, 이런 문장들의 구성을
웹브라우저는 무시합니다.
</p>
</body>
<!-- // -->
</html>
<!-- // -->p 태그는 블록형태로 존재하고 새로운 한줄부터 시작한다.
p 태그 사용시 화면이 처음부터 화면의 끝까지 공간을 차지하며 엔터나 빈공란이 많을 경우 웹브라우저는 이를 무시한다.
결과 화면을 보면 이 경우를 쉽게 알 수 있다.
위의 코드에서는 엔터와 빈공란 탭까지 사용했지만,
실제로 웹브라우저는 이를 무시하는 것을 볼 수 있다.
'programming > web' 카테고리의 다른 글
| 실시간 코드 에디터 html5 css3 스타일 적용하기 how to make code editor (0) | 2022.03.05 |
|---|---|
| 3번째 실시간 코드 에디터 동작 구현 만들기 how to make code editor (0) | 2022.03.03 |
| 2번째 실시간 코드 에디터 html5 만들기 how to make code editor (0) | 2022.03.01 |
| 실시간 코드 에디터 만들기 1번째 준비 how to make code editor (0) | 2022.02.27 |
| html5 h 제목 태그 사용하기 SEO에 중요할 수도 있다. (0) | 2022.02.25 |
댓글