드림코딩 display, position

1. display

<span>은 안에 내용이 있어야 표기됨

span {
display: block;
}

div와 같이 한 줄에 하나씩 나옴

div {
display: inline-block;
}

span과 같이 한 줄에 여러개 표시

div {
display: inline;
}

내용이 없어서 아무것도 표시 안됨
=> 내용 넣어야 표시

왜냐면 inline은 width,height 상관없이
컨텐츠에 따라 변경됨

‌inline-block은 안의 컨텐츠와 상관없이
지정한 width, height에 따라 변경 / 한줄에 여러개의 상자

block은 한줄에 하나의 상자

2. position

position은 기본값으로 static을 가짐
static은 html안에 정의된 순서대로 보이게 하는 것

article은 body안에 담겨져있기때문에 페이지 상 제일 위쪽 및 제일 왼쪽에 보여짐

이 container의 위치를 바꾸려면?
position의 값을 바꿔야 한다

position: relative;를 넣으면
left: 20px;
top: 20px;
적용됨

relative는 원래 있어야하는 아이템 자리에서 상대적으로 이동한 반면
absolute는 아이템이 담겨있는 상자 안에서 옮겨감
[제일 위에 있는 상자가 container라 container에서 20px씩 옮겨감]

fixed는
상자에서 벗어나서 윈도우[웹페이지]에서 움직임

sticky는 원래 있던 자리에 있는데
스크롤해도 원래 있던 자리에 있음


caniuse.com에서 새로운 css기능들의 호환성 여부 확인 가능
부분적으로 지원되거나, 오래된 버전은 postCSS에서 최신 css버전으로 코드 작성하거나
프레픽스를 넣을 수 있음