22.12.12

Position

Fixed

• position: fixed;
  element가 처음 생성된 자리에 고정이 되고 새로운 layer를 만든다.
• top, bottom, left, right 의 속성을 바꾸면 그에 따라 위치가 변경되어 고정된다.

---

Relative and Absolute

• position: relative;
  element가 처음 생성된 위치 를 기준점으로 top, bottom, left, right 위치 수정이 가능하다.

• position: absolute;
  가장 가까운 relative 부모를 찾고 부모를 기준으로 이동한다.
  position: relative; 를 해주면 부모가 된다.

---

Psudo selector

ex)
div: first-child {
background-color: tomato;
}

div: last-child {
background-color: teal;
}

id나 class를 따로 만드는 것보다 이렇게 지정하는것이 훨씬 좋은 방법이다.
HTML에 손 안대고 CSS에서만 수정해도 되기 때문이다.

• n번째 태그 수정하기
  span:nth-child(2) {
  background-color: teal;
  }
  span:nth-child(even) { //even (짝수) or odd (홀수)
  background-color: teal;
  }

---

Combinators

• div span {}
  div 부모태그 밑의 모든 span 자식 태그들을 지정한다.

• div>span {}
  div 부모태그 바로 밑의 span 자식 태그를 지정한다.

• div + span {}
  div 태그와 바로 다음 라인에 있는 span태그를 지정한다 (형제)

• div ~ span {}
  div 와 span은 형제이지만 바로 다음 라인에 있지 않아도 사용할 수 있다.

---

Attribute selector

• tag[attribute="value"]
  속성의 값이 "value"인 태그를 모두 적용한다.

• tag[attribute ~= "value"]
  앞뒤에 공백이 있는 상태에서 "value" 값을 포함한 모든 태그를 적용한다.

• tag[attribute *= "value"]
  앞뒤 공백 상관 없이 "value" 값을 포함한 모든 태그를 적용한다.