block
📌 block
: 옆에 아무것도 오지 않는 것.
예. div
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
margin: 20px;
}
div {
height: 50px;
width: 50px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
div에 display: inline을 하면 아무것도 보이지 않음.
(inline은 width와 height를 가질 수 없기 때문.)
inline
📌 inline
: width와 height를 가질 수 없음.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
margin: 20px;
}
div {
display: inline;
height: 200px;
width: 200px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
inline-block
📌 inline-block
: block으로 인식.
width, height, margin을 가질 수 있음.
바로 옆에 다른 요소가 올 수 있음
📌 단점
① 알 수 없는 공간들이 생김.
② 정해진 형식이 없음. → 화면 크기에 따라 보여지는 게 다를 수 있음.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
margin: 20px;
}
div {
display: inline-block;
height: 200px;
width: 200px;
}
#first {
background-color: darksalmon;
}
#second {
background-color: darkcyan;
}
#third {
background-color: darkgreen;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
'CSS' 카테고리의 다른 글
| [CSS] position (0) | 2022.09.14 |
|---|---|
| [CSS] Flexbox (0) | 2022.09.14 |
| [CSS] class (0) | 2022.09.13 |
| [CSS] box - margin, border, padding (2) | 2022.09.13 |
| [CSS] box (2) | 2022.09.13 |
댓글