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

Vicapor 2022. 1. 31. 20:07

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

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

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

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

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

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

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

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

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

caniuse.com