[CSS] fixed ~ pseudo selectors

fixed

• position 은 레이아웃보다는. 위치를 아주 조금 옮기고 싶을 때 사용
• position fixed를 이용하면 스크롤해도 항상 제자리에 머무른다 (처음 만들어진 자리에 고정됨)  
  -> 하지만 top, left, right, bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게되어 원래 위치가 무시된다.
  -> positon fixed를 이용하면 가장 위에 위치하게 된다. (맨 앞)
• top, left, right, bottom 이라는 프로퍼티 중
  하나만 수정해도 아래 위에 div 보다 위쪽으로 감 
  이때부터 block 이나 margin을 신경쓰지 않음
• 전에는 서로 같은 레이어에 있어서 서롤 접촉하고 있었다면
  이후부터는 두 div가 서로 다른 '레이어'에 있게 됨

 

See the Pen 14 by jangjia01234 (@jangjia01234) on CodePen.

 

 

 

relative 와 absolute

• position: static         -> 레이아웃이 박스를 처음 위치하는 곳에 두는 것
• position: relative      ->를 쓰면 top, bottom, right, left를 쓸 수 있게 됨.
  (엘리먼트가 처음 놓인 자리에서 아주 조금씩 상하좌우로 움직임)
• position: absolute    -> 여기선 body를 기준으로 상하좌우로 움직인다 (부모 box 기준 x)
  - 가장 가까운 relative 부모를 기준으로 이동시켜줌
  - relative한 부모를 찾지 못한다면 body를 찾음
  - relative한 부모를 div로 지정하기:
    예제에서 div {} 에 position:relative 추가하면 div box를 기준으로 움직이는 걸 볼 수 있음
      
• 총정리
  1. position에는 1)static (디폴트) 2)relative 3)absolute 가 있다
  2. 그 중에서도 absolute 와 relative 가 중요하다
  3. relative한 부모가 필요하다는 사실 꼭 기억할 것!
      (많은 사람들이 box는 relative한데 부모를 relative하게 만들지 않아서 오류를 내니 주의)

 

See the Pen 13 by jangjia01234 (@jangjia01234) on CodePen.

 

 

 

Pseudo selectors

• Pseudo Selectors 는 좀 더 세부적으로 엘리먼트를 선택해주는 것임
              
      특정 박스만 색 다르게 하기
              div:first-child { background-color: yellow; }
              div:last-child { background-color: blue; }
  
      특정 글자만 색 다르게 하기
              span { background-color: violet; }
              span:nth-child(2),
              span:nth-child(5) { background-color: tomato; }
      짝수/홀수 순서만 반복적으로 적용하는 예 (even/odd)
              span:nth-child(even)
  
      다른 순서로 적용하고 싶다면? 식 활용
              span:nth-child(3n+1)

 

See the Pen 12 Pseudo Selectors by jangjia01234 (@jangjia01234) on CodePen.

 

 

 

TIL 끝!