Block Element vs Inline Element
이번시간에는 Block element와 Inline element에 대해 알아보도록 하겠습니다.
div 태그와 span 태그
Block 레벨 요소의 대표적인 케이스로 <div> 태그가 있으며, Inline 레벨 요소의 대표적인 케이스로는 <span> 태그가 있습니다. 두 태그를 통해서 Block 레벨 요소와 Inline 레벨 요소의 차이점을 비교해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
background-color: aquamarine;
}
span {
background-color: brown;
}
</style>
</head>
<body>
<div>div 태그는 Block Element이며 글자수에 관계없이 한 블록을 차지함.</div>
<span> span 태그는 Inline Element이며 글자수만큼 공간을 차지함. </span>
</body>
</html>
블록과 인라인의 차이가 보이시나요? div 태그는 글자수에 상관없이 한 블록을 차지하는 반면, span 태그는 글자수에 맞게 공간을 사용합니다.
또 다른 차이점으로는 너비와 높이 조절이 블록은 가능하나 인라인은 불가능하다는 차이점이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
background-color: aqua;
width: 100px;
height: 100px;
border: 1px solid blue;
}
span {
background-color: red;
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span>1</span><span>2</span><span>3</span>
</body>
</html>
블록 요소인 div 태그는 CSS에서 width와 height을 통해 너비와 높이를 조절할 수 있는데요, 반면 span 태그는 너비와 높이를 조절해도 그대로인것을 알 수 있습니다. 즉 인라인 요소는 텍스트에 맞게 크기가 조절되기 때문에 CSS로 너비와 높이를 조절할 수 없습니다.
