Layout의 모든것

relative : 추가 프로퍼티를 입력하지 않는다면 기본형인 static 과 같이 작동한다. top, right, bottom과 left 프로퍼티 설정시 기존 설정에서 입력한 설정에 따라 조정되게 된다.

fixed : 페이지 한곳에 고정되어 있으며 스크롤을해도 기존의 위치를 유지한다. 모바일 브라우져에서는 지원이 잘 되지 않을경우가 있다.

absolute : fixed와 같이 작용하나 가장 가까운 부모를 기반으로 작동한다. 지정된 부모가 존재하지 않는다면 document body를 기반으로 작동하며 페이지 스크롤 진행에도 같이 움직인다.

inline : span과 같이 여러 요소와 함께 한줄에 사용 가능하며 높이 혹은 너비에 영향을 받지 않는다.

block : p와 같이 새로운 줄에서 시작하며 높이 전부를 차지한다.

inline-block : float와 유사하며 inline과는 다르게 너비와 높이를 설정 할 수 있다. block과의 차이점은 해당 태그 이후 줄변경이 진행되지 않아 여러 태그와 같이 한줄에 사용 가능하다. veritcal-align의 property에 영향을 받으며 기본적으로 top으로 지정 해주는것이 좋다.