CSS 레이아웃 정리

웹사이트를 만들때 DISPLAY, POSITION 아는것이 중요하다

span 태그는 inline레벨로, 내용을 작성해주지않으면 나타나지않는다.
css에서 display를 :block으로 해준다면 한줄에 하나씩 나오게된다.
div태그도 마찬가지로 css에서 display: inline으로 해준다면 한줄에 다 넣을수있음.

물건에 크기에 맞춰서 변경되는것은

display:inline

inline-block은 말 그대로 한줄에 여러개넣지만, 안에 컨텐츠 상관없이,width에 맞춰서 한줄에 하나는 block

---

position에 대해서 알아보자

만약 여기서

left:20px
right:20px;
로 하면 아무런 변화가없다. position의 기본인 static으로 설정되어있기때문이다.

static은 html의 순서대로 보여진다.
이 article은 당연히 브라우저 제일 위쪽으로 되어있다. 왼쪽.
그래서 이 컨테이너의 위치를 바꾸고싶다면?
position의 위치를 바꿔보자

position:relative

여기서 box의 position도 relative로 한다면, 원래 위치에서 상대적으로 20px씩 옮겨갈수있다.

원래 있어야되는 자리에서 옮겨가는것:relative

position:absolute로 한다면
내 아이템이 담겨있는, 내 아이템과 가장가까이 있는 박스(상자)안에서 옮겨간다제일 위에있는 container

fixed는 상자안에서 완전히 벗어나서 윈도우안에서 움직인다.

stickey는 원래 있던 그 자리에 있다. 스크롤링 해보면