👩💻 일반요소 / 빈요소(Empty Elements)
일반요소 (Elements)
<시작태그>내용</종료태그>
ex)
<h1>Heading</h1>
<p>Paragraph</p>빈요소 (Empty Elements)
내용과 종료태그가 없음
ex)
<br>
<img>👩💻 블록레벨요소(Block-level Elements) / 인라인요소(Inline Elements)
블록레벨요소
내용에 관계없이 가로줄을 모두 차지하는 요소
ex) hn, p, div, ul, li, ol, table...
인라인요소
내용만큼만 영역을 차지하는 요소
ex) a, img, span, em, b, input...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블록레벨요소 / 인라인요소</title>
<style>
h1, div{
width: 600px;
/* 블록레벨은 사이즈 지정해도 다른거 못들어옴 */
border: 3px solid red;
}
span{
border: 3px solid blue;
}
</style>
</head>
<body>
<h1>블록레벨요소 / 인라인요소</h1>
확인용 텍스트
<div>블록레벨요소</div>
확인용 텍스트
<br>
확인용 텍스트
<span>인라인 요소</span>
확인용 텍스트
</body>
</html>
👩💻 요소의 중첩
요소는 중첩 될 수 있다 = 요소는 다른 요소를 포함할 수 있다
ex)
<html>
<body>
<h1></h1>
<p></p>
</body>
</html>Parent and Child / Sibling
<h2>가나다</h2>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol> h2 / ol : 형제관계
ol / li : 부모자식관계(상하관계 중 직접 연결된 관계) && 상하관계
h2 / li : 상하관계 but 부모자식관계X
부모자식관계 ">" , 형제관계 "+"
h2+ol>li*3+tab
<h2></h2>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<div>
<!--그룹에서 가장 상위에 있는 요소 = 최상위요소-->
<div> <!--a에게 div는 upper-->
<p> <!--a에게 p는 parent, upper-->
<a>
<span> <!--a 기준으로 span은 lower, child-->
내용<br>내용 <!--a의 lower-->
</span>
</a>
<b>진하게표현</b> <!--a요소의 sibling 형제요소/이웃요소-->
<a>하이퍼텍스트</a> <!--a요소의 sibling 형제요소/이웃요소-->
<em></em> <!--a요소의 sibling 형제요소/이웃요소-->
<!--sibling에서 다음에오는걸 next, 이전에 오는걸 previous라고 함-->
</p>
</div>
</div>