공백기가 길었다… 오늘 할 것은 Position임

Position(1)

이번시간은 position을 배워보자. position은 요소를 원하는 위치에 두기 위한 프로퍼티이다. 총 5가지가 있다.

Untitled

sticky는 지원하는 브라우저가 많이 없어서 스킵하고, 나머지 네개를 배워보자.

포지션을 배울때는 반드시 두가지에 대해 생각해야 한다.

  1. 어떤 종류(type)의 포지션을 사용할 것인지
  2. 무엇을 기준으로 위치시킬 것인지 이 기준점은 포지션 타입에 따라 달라진다.

오늘은 포지션 첫 수업이므로, 스태틱과 relative에 대해 배워보자.

static

모든 요소의 기본적 포지션임. 스태틱은 우리가 생각하는 가장 일반적인 상태이다.

relative

이 친구의 기준점은 바로 자기 자신이 본래 있던 자리임.

이 기준점에서 위 또는 아래로 이동시킨다.

Untitled