- block
기본적으로 가로 영역을 모두 채움, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임, 문단을 표시할 때 주로 사용
width, height 속성을 지정할 수 있음
- inline
컨텐츠만큼 영역을 차지, 줄바꿈 되지 않음, width와 height를 지정할 수 없음
- inline-block
요소는 inline인데 내부는 block처럼 표시함
inline처럼 콘텐츠 영역 만큼 차지하여 가로로 배치되지만 block처럼 내부 속성인 width와 height 변경 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>display</title>
<style>
div,
h2 {
border: 1px solid lightcoral;
}
span,
a {
border: 1px solid lightcoral;
}
article > div,
span {
display: inline-block;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<h1>Display Block</h1>
<div>content</div>
<div>content</div>
<div>content</div>
<h2>title</h2>
<h1>Display Inline</h1>
<div>content</div>
<div>content</div>
<a href="#">Naver</a>
<article>
<h1>Display Inline Block</h1>
<div>content</div>
<div>content</div>
<div>content</div>
<span>content</span>
<span>content</span>
<span>content</span>
</article>
</body>
</html>
