CSS 레이아웃 정리 display, position 완성

https://www.youtube.com/watch?v=jWh3IbgMUPI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8 

 

 

display 

 

block : 상자로 변환 한줄에 한개

 

inline : 인라인으로 변환 (물건)

 

inline-block : 상자로 변환되어서 안에 컨텐츠와는 상관없이 박스의 width나 height에 맞춰서 표기

 

 

 

 

Position

 

static : Postion의 기본값 Html에 정의된 순서대로 자연스럽게 보이는 것.

 

relative : 원래 있어야할 자리에서 이동. (static의 위치에서 변경 값만큼 이동)

 

absolute : 아이템이 담겨있는 가장 가까운 box안에서 위치 변경이 이루어진다. 

 

fixed : 상자에서 벗어나서 웹페이지의 기준으로 이동한다. 

 

sticky : 원래있어야할 자리에 있지만 스크롤을 내려도 따라옴. 

 

 

 

브라우저에서 CSS를 사용할 수 있는지 확인하는 사이트

 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc