1. Position

• 요소를 원하는 곳에 위치시키기 위해 쓰는 프로퍼티
• position 종류
  • static, relative, absolute, fixed, sticky
  • sticky는 아직 지원하는 브라우저가 많이 없다.
• type => 기준점
  • 어떤 종류의 Position을 사용하는지, 사용하는 Position은 무엇을 기준에 두고 사용하는지 유의해야 한다.
• top or bottom / left or right: 하나씩만 사용하는 것이 좋다.

2. Position 종류

static

• 모든 요소의 기본 포지션 값
• 가장 일반적인 상태

relative

• 이동 기준점: 자신이 원래 있던 자리
• float와 마찬가지로 부모를 떠나서 붕 뜸.
  • 자신의 원래 위치를 기억하고 있다.
  • 나머지 요소들도 움직인애 원래 위치를 기억
  • 즉 float과는 다르게 Layout이 붕괴되거나 다른 요소에 영향을 주지 않음

=> top: 20px; left: 20px 자신의 위쪽 모서리를 기준으로 20px, 자신의 왼쪽 모서리를 기준으로 20px 이동

absolute

• float 사용할 때와 비슷함!
  • 부모가 absolute 사용하는 자식을 집 나간 자식 취급함
  • diplay가 block으로 신분 상승
  • 그러나 길막을 하지 못하는 block
• 기준점
  • 자신이 기준으로 삼고 싶은 기준점을 새로 정할 수 있음
  • position: static이 아닌 요소를 기준으로 잡을 수 있다.
  • postion: relative인 요소를 기준으로 잡는 것이 좋다

=> red을 postion: absolute 함, 부모요소인 회색박스는 position: static이라서 기준점 안됌, 그의 부모요소인 검정박스가 기준점이 됀다.

fixed

• absolute를 사용했을 때 동일한 현상이 일어남
• absolute를 사용했을 때와 다른점
  • 기준점이 명확함 => viewport
  • viewport: 브라우저 창의 전체 크기

3. z-index

• postion 된 요소들의 수직 방향으로서의 레벨을 알려주는 property
  

• img 태그는 display: inline이지만 width, height 사용이 가능
  하지만 display: block으로 바꾸어주면 더 깔끔하게 마크업할 수 있다
• img 사이즈를 부모 요소에 맞출 때

img {
  display: block;
  width: 100%;
  height: auto;
}

• 반복적으로 쓰이는 요소는 묶어서 쓰고, 다른 부분만 태그를 따로 써준다.
• transform : 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여
  • transform을 위해 제공되는 메소드
    • translate(100px, 50px) : 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동
    • rotate(30deg) : 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전, 주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전
• position: absolute; 이용해서 왼쪽 가운데 정렬시킬때 기준으로 할 요소를 position: relative;로 두고,

#prev
{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

• top: 0; => 기본값
  
• top: 50%; => 요소를 상위 높이의 절반만큼 아래로 이동
  
• top: 50%; transform: translateY(-50%);
  => 요소의 상단이 중간 표시에있을 때 요소를 높이의 절반만큼 뒤로 이동하여 전체 페이지의 중앙에 배치
  
• text-align 속성: 텍스트의 정렬 방향
  • left: 왼쪽 정렬
  • right: 오른쪽 정렬
  • center: 중앙 정렬
  • justify: 양쪽 정렬
• position: fixed;를 사용하면 컨텐츠 크기만큼만 width를 가지게 된다.