[basic] HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)

글의 단락이나 문단을 표시 (P : Paragraph의 두 문자)

 

---

 

1.
브라우저는 <p> 태그 앞 뒤로 약간의 공간(margin)을 주는데,
이는 CSS의 margin 속성으로 줄이거나 늘릴 수 있음.

2.
<p>태그는 블럭 요소.
즉, 한 줄 전체를 차지하며, 나열할 경우 줄 바꿈 됨.

 

3. 

시작 태그와 종료 태그로 구성.

 

<p> 속성

<p> 예제 - 스타일 주기

<p> 태그

 

문단단락 (※ Semetic Tag 맞음. 즉, 의미존재 O)
자체 margin 값 존재 O : 상하 1em 정도 띄어짐.

P요소끼리 나열 시 margin 병합으로 1em 간격 남.

 

---

<div> 태그

 

단순상자 (※ Sementic Tag 아님. 즉, 의미존재 X)
자체 margin 값 존재 X : div 2개 나열 시 달라붙음.
별도로 div에 margin 줄 경우 margin 병합이 존재.

 

---

[예제]

 

<style>

div {border:1px solid red;}

p {border:1px solid blue;}
</style>

<div>홈짱닷컴 Homzzang.com</div>

<div>홈짱닷컴 Homzzang.com</div>

<p>홈짱닷컴 Homzzang.com</p>

<p>홈짱닷컴 Homzzang.com</p>

<div>

  <p>홈짱닷컴 Homzzang.com</p>

</div>

 

결과보기