CSS 레이아웃 정리(Display / Position)

🖥 Display

Block level > div
Inline level > span

inline > 물건 / 안에 존재하는 콘텐츠의 양에 따라 그 크기가 가변한다.
inline-block > 특별한 상자 / 한줄에 여러개 위치할 수 있다.
Block > 상자 / 한줄에 하나만 위치할 수 있다.

div, span {
width: 80px;
height: 80px;
margin: 20px;
}

div {
background: red;
display: inline;
display: inline-block;
}

span {
background: blue;
display: bolck;
}

📍 Position

static > 기본 위치
relative > 기본 위치에서 이동
absolute > 나를 담고 있는(가까이 있는) 박스를 기준으로 이동
fixed > 모든 박스를 벗어나 웹페이지 기준으로 이동
sticky > 화면 이동시(스크롤링)에도 계속 같은 위치에 보이게 해주는 속성

div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}

.container {
background: yellow;
left: 20px;
top: 20px;
position: relative;
}

.box {
background: blue;
left: 20px;
top: 20px;
position: relative;
position: absolute;
position: fixed;
position: sticky;
}