2021-04-28 (16일차)★position 개념정리, static, relative, absolute, absolute의 가운데정렬방법, transform(변형)-translate

73강~79강

 

 

- class 'inline-grid'가 'box-1'보다 앞에 있어야 할 이유

  .inline-grid : 라이브러리 (한번 만들어서 여러번 쓰는 경우)

  .box-1 : 커스텀 > (오직 하나만 지정하는 경우)

 

- css 순서

  노말라이즈 > 라이브러리 > 커스텀

 

- ※ 우리 눈에 보이는 시점 : z축

---

<position 개념정리>

 

- position : static (사람모드, 기본값)

 

- position : relative (사람모드, 기본값)

  static과 똑같다. 단, 유령을 집화시킬 수 있음!

  window를 기준으로 움직이던 하위태그들을 다시 상위태그에 따라 움직이게함

  가운데 정렬을 하려면 margin으로 줘야해서(relative는 기본값이기 때문)

  확실한 정가운데 정렬 불가능

  absolute를 모을 때 relative를 사용해도 되지만, 자유롭게 배치도 원한다면 absolute를 사용

 

- position : absolute (유령모드)

  유령을 집화시킬 수 있음!

  부모나 형제에 구속되지 않고 window에 구속됨

  너비, 높이에 %값을 줘도 상위태그를 기준으로 하지 않고, window를 기준으로 함

  ※ left : x축(오른쪽) 이동

  ※ top : y축(아래) 이동

  ※ 아래에 위치한 태그일수록 앞에 표시됨

  

- absolute의 위치 기본값은 auto;

  태그에 absolute를 준 후, 위치를 건들지 않는다면(auto), 위치는 기본값의 원래 위치 그대로임

  (→ 유령화는 하고 싶고, 위치는 그대로 놓고 싶을 때 사용됨)

absolute의 포지셔닝은 기본값이다.

원래 위치 그대로, 뒤에 오는 것은 가려짐 (div가 유령이니까)

 

- width, height 없이 absolute 만들기

  top, bottom, left, right 위치값을 모두 지정해 줘야함. (기본값auto를 제외한 값을 줘야함)

 

 

- position : absolute 가운데 정렬

  absolute를 모을 때 relative를 사용해도 되지만, 가운데 정렬이 안 됨. →자유롭게 배치도 원한다면 absolute를 사용

- transform (변형)

  : 특수능력이 들어있는 기능

  transform : translateX(-50%) translateY(-50%)