CSS Display

display : block
- 줄 바꿈이 일어나는 요소로 지정
- 화면 크기 전체의 가로 폭을 차지한다.
- 블록 레벨 요소 안에 인라인 레벨의 요소가 들어갈 수 있음
display : inline
- 줄 바꿈이 일어나지 않는 행의 일부 요소
- `content` 너비만큼 가로 폭을 차지한다.
- `width`, `height`, `margin-top`, `margin-bottom` 을 지정할 수 없다.
- 상하 여백은 `line-height` 로 지정한다.
display : inline-block
- block과 inline 레벨 요소의 특징을 모두 갖는다.
- inline 처럼 한 줄에 표시 가능하며
- block 처럼 width, height, margin 속성을 모두 지정할 수 있다.
display : none
- 해당 요소를 화면에 표시하지 않는다. (공간조차 사라짐)
- 이와 유사한 `visibility: hidden` 은 해당 요소가 공간은 차지하나 화면에만 표시되지 않음

블록 레벨 요소와 인라인 레벨 요소

CSS Position

문서 상에서 요소를 배치하는 방법을 지정한다.
static : 모든 태그의 기본 값(기준 위치)
- 일반적인 요소의 배치 순서에 따름(좌측 상단)
- 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치됨

아래의 속성 값들은 좌표 프로퍼티(top, bottom, left, right)를 사용하여 이동이 가능함 (음수도 가능)
relative : 상대 위치
- 자기 자신의 static 위치를 기준으로 이동
- 레이아웃에서 요소가 차지하는 공간은 static 일 때와 같음
absolute : 절대 위치
- 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
- static 이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동 (없는 경우 body에 붙는다.)
fixed: 고정 위치
- 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
- 부모요소와 관계 없이 viewport 를 기준으로 이동
- 스크롤 시에도 항상 같은 곳에 위치함

원래 위치해 있었던 과거 위치에 있던 공간은 더 이상 존재하지 않음
즉, 다른 모든 것들과 별개로 독자적인 곳에 놓임
페이지의 다른 요소의 위치와 간섭하지 않은 격리된 사용자 인터페이스 기능을 만드는데 활용
- 팝업 정보상자, 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기 할 수 있는 유저 인터페이스 페이지 등등