CSS

1. position 속성

• relative : 기본 위치(static)를 기준으로 top, bottom, left, right(좌표 프로퍼티)를 사용하여 위치 이동.
  static을 선언한 요소와는 좌표 프로퍼티의 동작 여부 차이이며 그 외 동일.

• absolute : 부모 or 가장 가까이에 있는 조상 엘리먼트를 기준으로 좌표 프로퍼티만큼 이동(position: static; 제외).
  엘리먼트가 static인 경우 본문(document body) 기준.

• fixed : 부모와 관계없이 viewport를 기준으로 좌표 프로퍼티를 사용하여 위치 이동.
  스크롤이 되더라도 위치 고정.

! absolute, fixed 선언 시 block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

2. display

• inline
  - 줄 바꿈 없이 다른 요소와 한 행에 위치. (문장 중간에 들어갈 수 있음)
  - content 너비만큼 가로폭 차지.
  - inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우 space(4px) 자동 지정.
  - inline 내에 block 레벨 요소를 포함 할 수 없음.
  - width, height, margin-top, margin-bottom 프로퍼티 지정 불가. (상,하 여백은 line-height로 지정)
  

• block
  - 항상 새로운 라인에서 시작.
  - 화면 전체 가로폭 차지. (width:100%)
  - block 레벨 요소 내에 inline 레벨 요소 포함 가능. (일반적)
  - width, height, margin, padding 프로퍼티 지정 가능.

• inline-block
  - inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티 지정 가능. (inline과 block 레벨 요소의 특징을 모두 가짐)
  - 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.
  - content 너비만큼 가로폭 차지.
  - inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우 space(4px) 자동 지정.

3. float

• 이미지와 텍스트 배치 용도로 등장했지만 레이아웃용으로 많이 사용.
• value : left; right; none; inline-start; inline-end
  + clear 를 사용해 제어 가능.