position:fixed;
block 이나 margin 등에 영향 받지 않고 모든 것의 가장 위에 있게 할 수 있다.
position:static;
기본 값으로, 레이아웃이 박스를 처음 위치 하는 곳에 둔다.
position:relative;
top, bottom, left, right속성을 사용하여 요소가 처음 위치한 곳을 기준으로 움직일 수 있다.
position:absolute;
top, left, bottom, right을 사용 할 수 있다.
가장 가까운 relative속성을 가진 부모를 기준으로 이동한다.
relative속성을 가진 부모가 없을 경우 body를 기준으로 움직인다.
→즉, body를 기준으로 움직이는 게 싫다면 부모에 relative값을 주면 된다.
pseudo selector(스도 선택자)
span:nth-child(n+1)
span:nth-child(even) even= 홀수, odd=짝수
div:first-child{}
div:last-child{}
p span{color:white}
p(부모)안에 있는 span(자식)을 하얀색으로 하라는 의미.
- 부모가 많다면 원하는 만큼 부모를 써도 된다.
div > span{color:white;} 어떤 요소의 바로 밑 자식에게만 효과를 주고 싶을 때 쓴다.
p + span{color:white;} 어떤 요소의 바로 다음 형제에게만 적용되는 방법
div ~ span{}어떤 요소가 다른 요소의 형제인데 바로 뒤에 오지는 않을 때 쓸 수 있다.
그 외, 속성을 이용해서 선택하는 방법도 있다
input:required{border:2px solid purple}
class추가 없이 required값을 가진 input에만 적용할 수 있다.
input:optional{border:2px solid dashed}
input[type="password"]{background-color:yellow;}
타입이 패스워드인 input이 노란색 배경색을 가지게 한다.
input[placeholder="name"]{background-color:white;}
name이라는 placeholder에 흰 배경색을 가지게 한다.
등..
mdn_pseudo selector참고
