inline : 요소의 필요 크기만큼만 영역을 잡는다.
별도의 사이즈를 줘도 무시
옆으로 나열됨
대표적인 인라인 레벨 태그 : span
block : 기본 가로는 가능한 끝에서부터 끝까지 잡는다.
세로로 나열됨.
기본 세로는 필요크기만 잡는다.
별도의 사이즈를 주면 적용
대표적 블록 레벨 태그 : div
<!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 id="box1 class="box1> div태그1 </div>
<div id="box1 class="box1> div태그2 </div>
<div style="width: 100px; height: 100px; background-color: red;"> div 태그3 </div>
<span style="width: 100px; height: 100px; background-color:blue;">span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</body>
</html>