의 내용은 유투브 드림엘리코딩의 내용을 정리한 것입니다.
<body>
<!-- block level -->
<div></div>
<div></div>
<div></div>
<!-- inline level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
div, span {
width: 80px;
height: 80px;
margin: 20px;
}
div {
background-color: blue;
}
span {
display: block;
background-color: tomato;
}
span
태그의 경우 내용이 있어야 표기가 된다.div
태그의 경우 내용이 없어도 css 만으로도 표현이 가능하다div
경우 한 줄에 하나씩 표현이 되고, span
태그의 경우 inline 요소여서 공간만 있으면 한 줄에 여러 요소가 표현이 된다. span
에도 display: block
요소를 주어 한 줄에 하나씩 표현하는 것이 가능하다. <!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article class="container">
<div></div>
<div class="box">i'm box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
</body>
</html>
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background-color: red;
}
.container {
background-color: yellow;
left: 20px;
top: 20px;
position: relative;
}
.box {
background-color: blue;
left: 20px;
top: 20px;
position: relative;
}
position
은 기본 값으로 static
static
값을 relative or absolute
로 변경을 해야 위치가 이동된다.container
의 경우 처음엔 left: 20px; top: 20px;
값이 적용이 안되는데 relative
로 바꿔서 적용을 할 수 있다.box
에 absolute
값을 준다. 이를 사용하게 되면 내 아이템이 담겨 있는 가장 가까운 부모 속성 안에서 위치 이동이 가능하다..box
에 fixed
값을 준다. fixed
는 view
를 따라서 적용이 된다. 참고사이트