레이아웃

1. Position

1) static

: 차례대로 왼쪽부터 차곡차곡 쌓이는 상태로 따로 지정해 주지 않아도 되는 기본값이다.

2) relative

: 자신의 기존의 위치를 기준으로 top, bottom, left, right 의 위치로 이동한다.
지정하지 않을 경우 static과 동일하게 사용된다.

.box-relative {
  position: relative;
  top: 20px;
  left: 50px;
}

• 자신의 기존 위치(상대적)을 기준으로 아래로 20만큼 오른쪽으로 50만큼 이동한다.

3) fixed

: 스크롤이 이동해도 원래의 위치에 고정된다. rerative처럼 top, bottom, left, right 의 위치로 이동한다.
엘리먼트 상태가 사라져버린다.

4) Absolute

: 이 엘리먼트에는 절대 위치가 지정되어 있다. 조상 태그 중 relative가 없다면 body를 기준으로 이동한다.
(margin auto도 무시된다.)

.box-absolute {
  position: absolute;
  top: 120px;
  right: 0;
}

• body를 기준으로 아래로 120픽셀만큼 이동한다.

2. Display

: 다른 컨텐트와 가로 공간을 공유할 수 있는지에 대한 속성이다.

1) none

: 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용한다.

< visibility: hidden 과의 차이점 >

• display: none 으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링되는 것이고,
• visibility: hidden 으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지한다.

2) inline

: span처럼 공간 박스가 없어지고 줄바꿈이 되지 않아 텍스트가 1줄로 붙게된다.

3) block

: Block은 새 줄에서 시작해 좌우로 최대한 늘어난다. p, form, header, footer, section 등이 이것에 해당된다.
(span으로 작성한 태그도 무조건 줄바꿈이 된다.)

4) inline-block

: inline과 기본적인 속성은 동일하지만(1줄로 붙음) block의 속성도 가지고 있다.
inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다.

3. Float

: 해당 요소를 다른 요소의 위에 띄울때 사용된다. 이미지 주변에 텍스트를 채우기 위해 만들어졌다고도 한다.

.box-bottom {
  float: right;
}

• left : 요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄운다.
• right : 요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄운다.
• none : 요소를 띄우지 않습니다. 기본값

  여러 사이트에서 띄운다고 표현하던데 그렇게 표현하기엔 조금 부족하다.
  float의 같은 속성을 가진 컨테이너가 여러개일 경우 그 방향에 차곡차곡 하나씩 쌓인다.
  그냥 띄우는 것이 아닌 float이 없는 컨테이너의 위에 띄운다고 생각하는 것이 더 나을 것 같다.

4. Clear

: 상단 네비게이션바를 만들 때 float속성으로 원하는 곳에 배치를 하면 그 다음에 오는 태그들의 위치가 뭉개지는 경우가 허다하다. 원래 float 뒤에 포지션이 뭉개지는 현상은 오류로 생겨난 것이고, 이를 해결하는 clearfix는 위의 오류를 해결하기 위해 만들어낸 일종의 버그 해결 방법이다.

• none : clrer를 사용하지 않은 것과 동일하다.
• left : 좌측으로 붙는 float를 취소해서 줄을 바꾼다.
• right : 오른쪽으로 붙는 float를 취소해서 줄을 바꾼다.
• both : 왼쪽 오른쪽 모두

5. Clearfix

: float을 사용하다보면 블럭보다 그 내부 요소가 넘치는 경우가 있다. (clearfix 가 속성 값은 아니다.)

.clearfix {
  overflow: auto;
}

• 이렇게 입력할 경우 블럭에 맞게 조절해준다.

6. Z-index

: 겹친 컨텐트 중 z-index값이 큰 쪽이 위로 올라오게 된다.

• z-index: 1 로 설정한 컨텐트가 z-index: 0 으로 설정한 컨텐트보다 위로 올라간다.