📝CSS의 display와 position 속성 이해하기

이번 글을 작성하는 이유는 CSS를 배우면서 display와 position 속성을 자주 까먹고 있어서, 내가 공부하면서 보기 편하게 정리해두려고 합니다. 모든 공부 완료 후 좀 더 CSS에 대해서 이해하게 된다면 좀 더 자세히 내용을 보완하려고 합니다. 아직 많이 부족하여 내용이 틀리거나 다를 수도 있습니다.

❓display

✅︎ display: block

• width나 height의 크기를 지정하면 입력된 크기의 공간만큼 보여진다.
• 한줄에 한개씩만 진열이 가능한 상자.

✅︎ display: inline-block

• width나 height의 크기를 지정하면 입력된 크기의 공간만큼 보여진다.
• 한줄에 여러개의 진열이 가능한 특별한 상자.

✅︎ display: inline

• 데이터가 들어와야 공간이 생기며 입력된 데이터의 크기만큼 공간들 차지한다.
• width나 height의 크기를 지정하여도 입력된 크기의 공간을 가지지 않는다.
• 한줄에 여러개의 inline을 가지는 물건.

❓position

✅︎ position: static

• css에서 지정된 디폴트 벨류인 포지션이 static이다.
• 제일 위의 왼쪽으로 요소가 붙어 있다.

✅︎ position: relative

• 기본 지정된 자리에서 주어진 top, left 등등의 값만큼 움직인다.

✅︎ position: absolute

• 내 아이템이 담겨있는 아이템의 가장 가까운 박스안에서 위치 변경이 이루어진다.

✅︎ position: fixed

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

✅︎ position: sticky

• 기본 자리에서 스크롤링 되어서 기본자리에 그대로 유지된다.
• ex) 예로 들자면 홈페이지의 nav바가 아래로 스크롤링 되어도 nav바가 유지되는 웹사이트?