CSS display, position 정리

이재진·2020년 12월 16일

js bin 으로 실습한 내용입니다.

div는 block level이고 한줄에 하나씩 출력된다.
span은 inline level이며 내용이 있어야 표기된다. 한줄에 공간이 많으면 여러개가 동시에 나온다.

만약에 span을 div 처럼 한줄에 하나씩 만들려면 diplay로 block을 주면 된다.

만약 div를 span 처럼 한줄에 여러개로 하려면 diplay로 inline-block을 주면 된다.

만약 div를 diplay로 inline 만을 주게 되면 아무것도 표시 안된다. 아무런 내용을 넣어주지 않았기 때문.

다만 내용을 넣으면 표시된다. span과 마찬가지로 inline되어서 보여짐.

inline : 컨텐츠 자체만을 꾸며주는 것이다.
css에서 width,height크기를 지정해준것과는 별개로 안에 들어 있는 물건의 크기에 따라 변경된다.

inline-block : 한줄에 여러개 넣는데 블록단위로 상자로 변환되어서 안의 컨텐츠의 사이즈에는 상관없이 우리가 지정한 css에서 width,height크기 맞춰 표기된다.

요약하자면

inline - 물건

inline-block - 상자인데 한줄에 여러개 진열

block - 상자인데 한줄 당 하나.

컨테이너의 포지션을 바꾸고 싶어서 left와 top을 주었으나 변화가 없다. 그 이유는 기본값은 static 이기 때문이다.
position - 기본값은 static .

static
static -html에 정의된 순서대로 브라우저상에 자연스럽게 보여짐.
현재 articel은 바디 안에 담겨져 있기 때문에 페이지 상에 제일 왼쪽, 위에 보여짐.

relative
container 이동
컨테이너 위치를 바꾸기 위해 position을 relative를 주면
왼쪽 , 위에서 30px 씩 이동 된 것을 볼 수 있다.

상자 이동
상자가 옮겨짐. 원래 아이템이 있어야 하는 자리에서 상대적으로 30px씩 옮김.

absolute
absolute는 내 아이템이 담겨 있는 가장 가까이에 있는 상자 안에서 옮겨짐. 여기서 상자는 container.

fixed
fixed는 상자안에서 완전히 벗어나 윈도우안에서 움직임. 웹페이지에서 옮겨 간것.

sticky
원래 있어야 하는 자리에 있으면서 스크롤링 되어도 없어지지 않고 고대로 붙어있는 것.

정리하자면

relative - 원래 있어야 하는 아이템에서 옮겨간것

absolute - 내가 담겨 있는 상자(container)안에서 움직인것

fixed - 상자에서 완전히 벗어나서 페이지 상에서 옮겨간것

sticky - 원래 있어야 하는 자리에 있으면서 스크롤링 되어도 없어지지 않고 고대로 붙어있는 것.

개발블로그