Position
static - 기본값으로 html에 작성된 기준으로 위치가 정해진다.
relative - 해당 요소를 기준으로 위치를 줄 수 있다. top, bottom 등의 포지션을 주면 자신의 위치를 기준으로 주어진 값 만큼 이동한다.
absolute - 배치 기준을 부모요소로 부터 찾는다. top, bottom 등의 포지션을 주면 부모요소로 부터 주어진 값 만큼 이동한다.
fixed - 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 브라우저 전체화면이다. 해당 요소는 스크롤바의 위치에 상관 없이 화면에 고정되게 된다.
Block
block - display속성 값이 block으로 지정된 엘리먼트는 기본적으로 한줄의 공간을 차지한다. 가로와 세로 값을 지정하지 않을 경우 컨텐츠가 차지하는 공간과 상관없이 한줄을 차지하게 된다. 가로,세로를 지정해 크기를 조정할 수 있다.
inline - display속성 값이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 해당 엘리먼트가 갖고있는 컨텐츠 만큼의 공간만 차지하고 따로 가로,세로 값을 줄 수 없다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.
inline-block - inline-block의 경우 inline과 block의 특징을 모두 갖고있다. 기본적으로 inline값과 같이 줄바꿈 없이 사용할 수 있고, block값처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.
