반응형
SMALL
1. div & p & span 태그 설명
▼ <div> 태그
- <div> 태그는 body 문서 안에서 각 영역을 구분할 때 사용
- block 요소
- layer을 구분하거나 틀을 만들어주는 컨테이너 역할
▼ <p> 태그
- <div>와 같이 block 요소
- <div> 같은 경우는 하위에 블록요소가 포함되지만 <p>는 하위에 블록요소가 포함되어선 안됨
▼ <span> 태그
- inline 요소
- HTML 문서 내에 자신에게 주어진 공간만 차지하는 태그
2. div & p & span 차이점 비교
1) block / inline
- <div>, <p>는 block 요소로 가로줄 전체를 다 차지
※ <div>는 문서태그이긴 하지만 영역을 나눌 때 주로 사용하며 <p>를 문서 내용을 작성할 때 사용함
- <span>은 inline 요소로 주어진 공간만 사용
2) 하위태그 포함 요소
- <div> 태그는 <p>,<span> 태그가 하위(자식태그)로 사용 가능
- <p>태그는 <span> 태그는 하위로 가능하지만 <div> 태그는 하위로 불가능
- <span>태그는 <div>, <p> 태그 둘 다 하위로 사용 불가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시맨틱 요소 설명</title>
</head>
<body>
<div> <!-- div 태그안에 p,span태그 가능 -->
<p>div 태그 하위로 사용 가능</p>
<span>하위로 사용 가능</span>
</div>
<div> <!-- div 태그안에 p,span태그 중첩도 가능 -->
<p>
<span>div안에 p안에 자식으로도 사용가능</span>
</p>
<div>
이렇게 중첩으로 div안에서는 사용가능
</div>
</div>
<p> <!-- p태그 안에 span 사용 가능 -->
<span>p태그 안에 사용가능</span>
</p>
<span> <!-- span태그 안에 block 요소인 p,div는 하위가 될수 없음 -->
<p>span의 인라인 요소로 p태그나 div태그는 사용불가능</p>
<div>span보다 div나 p가 더 크기 때문에</div>
</span>
<p> <!-- p태그 안에 span태그는 사용되지만 div 태그는 하위가 될수 없음 -->
<div>p안에 div태그 사용 불가능</div>
<span>span태그는 가능하지만 div는 문서정보 작성도 있지만</span>
<span>영역을 나누는 컨테이너 개념이라 p의 하위가 될수 없음</span>
</p>
</body>
</html>'코딩(기초 입문) > HTML' 카테고리의 다른 글
| id & class 태그의 차이점 (0) | 2024.11.18 |
|---|---|
| HTML 시멘틱 태그 (sementic) (4) | 2024.11.14 |
| HTML 폼 태그(form) - 3(요소 설명) (0) | 2024.11.13 |
| HTML 폼 태그(form) - 2(요소 설명) (0) | 2024.11.12 |
| HTML 폼태그(form) - 1 (0) | 2024.11.12 |
