<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>P & DIV tag</title>
<style>
#target1 {
width: 100px;
height: 50px;
background-color: yellow;
}
#target2 {
width: 100px;
height: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<p id="target1">이것은 p요소입니다.</p>
<div id="target2">이것은 div요소입니다. </div>
</body>
</html>
<div>태그는 <p>태그처럼 문자 정보를 입력할 수 있지만,
실제 용도는 HTML문서의 영역별 구분입니다.
각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있습니다.
예를들어 웹페이지에서 어떤 영역이 헤더 영역이고,
네비게이션 메뉴 영역, 본문 기사 영역 등의 영역 구분을 할 때
<div>태그를 여러겹 겹쳐서 사용합니다
<div id="title">
<div id = nabigator> </div>
<div id = content>
<p>본문</p>
</div>
<div>태그의 영역별 구분이 발전되어서 표현한 값이 <article>,<nav>등의 태그입니다.
<div>태그의 목적은 영역 구분이므로 하위에
<p>태그와 같은 다른 블록 요소를 포함할 수 있습니다.
정리하면. 텍스트 정보는 <p>태그 안에 작성합니다.
그 밖의 다른 영역을 나누는 용도는 <div>태그를 중복으로 겹쳐서 사용합니다.
<p>태그 하위에는 <span>, <a> <strong>등과 같은 인라인 요소만 올 수 있습니다.
<p><div>Hello World!</div><p>와 같은 형태가 있다면,
<div><p>Hello World!</p></div>와 같은 형태로 변경해야 합니다.
꾸준함의 가치를 믿는 개발자