📘 Block Level 🆚 Inline Level

📖 Block Level

• 세로로 배열됨
• 컨텐츠와 상관없이 우리가 지정한 사이즈로 표시됨
• 대표적으로 <div> 의 기본값이 block 임
• display: block; 로 설정 가능

📖 Inline Level

• 가로로 배열됨
• 컨텐츠에 따라 크기가 지정됨, 안에 아무 내용이 없으면 안보임
• 대표적으로 <span> 의 기본값이 inline 임
• display: inline; 로 설정 가능
• display: inline block; 해주면 내용이 없어도 표시됨

• 쉽게 말해 inline 은 물건, block 은 박스로 생각하면 된다

📘 Position

• position 은 기본값으로 static 을 갖고있는데, html 에서 정의된 순서대로 브라우저 상에서 자연스럽게 보여지는 상태를 말함
• 위치를 바꿔주고 싶다면 position: relative 로 바꿔주면 됨. relative 는 static 상태에서 원래 있어야 했던 자리에서 옮겨줌
• absolute 는 현재 그 요소가 담겨있는 가장 가까운 박스의 static 위치를 기준으로 위치가 변경됨
• fixed 는 상자에서 아예 벗어나서 window 자체에서 움직임
• sticky 는 스크롤이 되도 원래 있던 자리에 있음