[HTML] p/div/span 태그의 차이
p, div, 그리고 span은 HTML 문서에서 자주 사용하는 태그들이다.
주로 사용자에게 전달할 정보를 담으며 웹 페이지에서 차지할 영역을 설정한다.
p/div/span 태그의 차이
p/div/span 태그의 차이는 영역 설정에서 일어난다.
아래 예시와 설명을 통해 확인해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event</title>
</head>
<body>
<p>This is p tag.</p>
<div>This is div tag.</div>
<span>This is span tag.</span>
</body>
<style>
p {
background-color: red;
}
div {
background-color: blue;
}
span {
background-color: green;
}
</style>
</html>
OUTPUT:
✔Check Point
- p/div와 span의 차이점: p와 div 태그는 블록 요소이다. 따라서 영역이 줄 단위로 나누어진다. 반면 span 태그는 인라인 요소이므로 태그 안의 내용 길이 만큼 영역을 설정한다.
- 인라인 요소는 블록 요소를 포함할 수 없다. 즉 span 태그 안에 p나 div 태그를 놓을 수 없다.
- p와 div의 차이점: p 태그는 단락 단위로 영역을 설정한다. 따라서 p 태그가 걸린 단락은 위아래로 한 줄씩 띄어준다. 반면 div 태그는 단락 단위가 아니므로 내용 위아래로 간격이 없다.
-
단 p 태그가 걸린 단락들이 연속으로 이어진다 하더라도 양 단락 간에 두 줄이 띄어지진 않는다. p 태그는 단지 단락처럼 보이도록 다른 글과 분리를 시켜주는 역할을 할 뿐이다.
-
p 태그에는 인라인 요소(ex- span, a, button…)만 포함할 수 있다.
-
div 태그에는 블록 요소와 인라인 요소 둘 다 포함할 수 있다. div 태그의 주목적은 정보를 담는 것 보다 영역을 나누기 위한 것이다.
-
Leave a comment