div

1. 기본적으로 block 레벨이라서 한 줄에 한 개씩 나온다.

span

1. 안에 내용이 있어야 표기된다.
2. inline 레벨이라 한 줄에 여러 개가 나올 수 있는만큼 나온다.

display (속성)

1. display 속성값을 block, inline-block, inline 등으로 바꿔줄 수 있다.

• inline
  inline 레벨은 내용이 없으면 아무것도 표시되지 않는다. 컨텐츠 자체만을 꾸며주는 것이기 때문에 우리가 css로 width나 height를 정한 것을 무시하고 안에 들어있는 물건의 크기에 맞춰서 변경되는 것이다.

• inline-block
  반대로 inline-block은 한 줄에 여러 개가 나오는데, block 단위 상자로 변환되어서 안에 컨텐츠 사이즈와 상관없이 우리가 지정한 box의 width나 height에 맞춰 표기된다.

• block
  block은 상자긴 상자지만 한 줄에 하나씩만 표기된다.

position

position의 기본값인 static으로 인해 값을 지정해주어도 처음에는 아무런 변화가 없다. static은 html에 정의된 순서대로 브라우저에 자연스럽게 보여지는 것을 말한다. 그래서 position의 값을 바꿔주어야 한다.

relative는 원래 있어야 하는 그 자리에서 상대적으로 내가 지정한 만큼 옮겨가는 것이다.

absolute는 내 아이템이 담겨있는 박스 안에서 위치 변경이 일어나는 것이다.

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

sticky는 원래 있어야 하는 자리에 있는 대신, scrolling을 해보면 원래 있었던 자리에서 없어지지 않고 그대로 붙어있는 것이다.