의 내용은 유투브 드림엘리코딩의 내용을 정리한 것입니다.
inline & block 기본 개념
<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 요소여서 공간만 있으면 한 줄에 여러 요소가 표현이 된다. - css 코드 가장 밑,
span에도display: block요소를 주어 한 줄에 하나씩 표현하는 것이 가능하다.
inline & block & inline-block 개본 개념
- inline : 물건 자체, 컨텐츠 자체만을 꾸며준다. 컨텐츠의 길이에 따라 달라진다.
- inline-block : 한 줄에 여러 개 넣을 수가 있는데 블럭 단위로 가능하다. 상자로 변환이 되어 가능하다. 안의 컨텐츠와는 상관이 없이, 사용자가 지정한 width, height 값을 따라 표현이 된다.
- block : 상자 단위, 한 줄에 하나만 가능하다.
position
relative, absolute, static, fixed
<!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은 기본 값으로staticstatic값을relative or absolute로 변경을 해야 위치가 이동된다.container의 경우 처음엔left: 20px; top: 20px;값이 적용이 안되는데relative로 바꿔서 적용을 할 수 있다- 이 부분이 잘 이해가 되지 않는데, .container가 static이면 부모 속성을 따라간다고 하는데, body 전체가 적용이 되어 그런 것인가... 잘 모르는 부분이다.
.box에absolute값을 준다. 이를 사용하게 되면 내 아이템이 담겨 있는 가장 가까운 부모 속성 안에서 위치 이동이 가능하다..box에fixed값을 준다.fixed는view를 따라서 적용이 된다.
참고사이트
지뢰찾기 개발자