3.12~3.16

3. LEARNING CSS

3.12 Fixed

position:fixed

position : 위치를 아주 조금 옮길때 사용

▶️ position:fixed

• 화면을 스크롤에 상관없이 box의 위치를 고정 (fixed적용전 위치에)
• top left right bottom의 속성을 지정해주면 위치가 변경되어 고정

---

3.13 Relative Absolute

Relative

• top left right bottom의 속성을 지정하여 요소가 처음 위치한 곳을 기준으로 이동

Absolute

• top left right bottom의 속성을 지정하여 가장 가까운 relative부모요소를 기준으로 이동

• relative인 부모요소가 없다면 body를 기준으로 이동.

  
  
  

  ---

  
  

3.14 Pseudo Selectors part One

가상선택자_1 fist / last / nth child

▶️ CSS파일에서 특정 html태그를 가져오는 방법으로, 좀더 세부적으로 요소를 선택할 수 있다.

• tag:first-child : 태그들 중, 가장 처음에 있는 해당태그요소
• tag:last-child : 태그들 중, 가장 마지막에 있는 해당태그요소
• tag:nth-child(number) : number에 들어간 숫자번째 자식 태그
  - (odd) :홀수번째
  - (even): 짝수번째
  - (xn + y):y번째 숫자부터 x번째 숫자마다

  span:nth-child(4n+2)  // 2번째 태그부터 4개씩

---

3.15 Combinators

부모요소 안에 하나이상의 자식요소가 있고 그 자식요소 안에 또 다른 자식요소가 있을때

• 부모태그 자식태그 : 부모선택자 안의 모든 해당 자식선택자
  - 여러 태그를 사용해도 됨. (ex. div > p > span : div 안의 p안에 있는 span )

• 부모태그 > 자식태그 : 부모선택자 바로 밑의 자식선택자

• 자식태그 + 자식태그 : 같은 부모선택자 안에 있는 본인 바로 다음에 있는 형제선택자

• 자식태그 ~ 자식태그 : 같은 부모선택자 안에 있는 본인 다음에 있는 형제선택자 (인접해 있지 않아도 됨)

  
  

  ---

  
  

3.16 Pseudo Selectors part Two

가상선택자_2 : Attribute selectors

• 태그:요소 : 해당 요소를 가지고 있는 태그
• 태그[속성="값"] : 해당 속성 ='값'을 가지고 있는 태그
  - 속성뒤에 ~ 가 들어가면 속성 값을 포함한 모든 태그 태그[속성~="값"]

더 많은 선택자는 MDN 으로확인

---

<코딩 챌린지>

챌린지완료