코코아 클론 챌린지 8일차

배울 점, 기억할 점

position

1. position : fixed
스크롤을 내려도 그 위치에 고정
2. position: relative
엘레멘트가

 처음 생성된 위치를 기준으로 top, bottom, left, right로 위치 수정 가능
3. position: absolute
가장 가까운 relative 부모를 기준으로 top, bottom, left, right로 위치 수정 가능
position: relative를 쓰면 부모가 된다.

pseudo selector: id나 class 없이 엘레멘트 선택 가능

ex) div:first-child { } 첫번째 자식
div:last-child { } 마지막 자식
span:nth-child(2) { } 2번째 자식
span:nth-child(even) { } 짝수 반복
span:nth-child(2n+1) { } 3부터 홀수 반복
p span { } p태그 안에 있는 span
div > span { } div 바로 밑의 span만
p + span { } p 바로 옆의 span만
p ~ span { } p 바로 옆의 span이 아니어도 형제인 span

태그의 특성으로도 할 수 있음
ex ) input:required
input[placeholder="name"] { } placeholder가 name인것
input[placeholder~="name"] { } 앞뒤에 공백이 있는 상태에서 name이 포함되면
input[placeholder*="name"] { } 앞뒤에 뭐가 있던 name이 포함되면 

mdn에 더 많음!

 

position에 대한 개념을 처음 알게되어서 이번 과제는 조금 어려웠다..