[HTML/CSS] Position, Pseudo Selectors, States

Position

div에 position:fixed를 취하면 화면이 내려가도 화면상의 box의 위치는 바뀌지 않는다. 또한 fixed를 한 뒤에 top, bottom, left, right 중 어느 하나만 취해도 위에 붙어 있던 레이어는 신경도 안쓰고 위로 올라갈 수 있다. 즉 기존의 레이더가 무엇이건 다른 레이어 위에 위치할 수 있다.

 

position : static은 디폴트 값으로 맨 처음 위치 그대로 유지하는 경우에 해당한다.
position : relative는 원래의 위치에서 top, bottom, left, right 각각을 조금씩 움직이고 싶을 때 사용
ex. top : -10px left : -10px 이면 위로 10px만큼, 왼쪽으로 10px만큼 이동한다.
position : absolute의 경우는 realative부모를 기준으로 움직인다. 부모 box가 relative가 없다면 body를 기준으로 하게 되어 부모 box안에 있는 자식 box여도 부모 box와 상관없이 맨 위, 아래, 오른쪽, 왼쪽을 기준으로 시작한다. 그런데 부모 box에 relative가 있다면 그 부모 box를 기준으로 움직인다.

 

선택자 Combination

div p : 부모인 div아래에 있는 자식인 모든 p를 지칭
div > p : 부모인 div아래에 처음으로 바로 나오는 자식p를 지칭
div + p : div 태그 바로 아래에 있는 p 태그 지칭(부모 X 형제O), 만약 바로 아래가 아니라면 지칭할 수 X
div ~ p : div 태그 바로 아래가 아니더라두 그 이후에 나오는 p태그 지칭

 

Pseudo Selectors

Pseudo Selectors : 클래스나 id 추가없이 지칭하는 방법
div : nth-child(even) { } : 짝수번째에 해당하는 div에 대한 설정을 할 시
input : required { } : input중에 required 속성이 있는 input에 대한 설정을 할 시
input[placeholder~="name"] { } : input중에 placeholder에 name이 포함된 input에 대한 설정을 할 시

 

States

activate : 클릭을 했을 때의 상태
hover : 마우스를 갖다 댔을 때의 상태
focus : 클릭이나 키보드로 선택하거나 이동할 시의 상태
visited : 해당 링크를 방문했을 때의 상태
focus-within : 자식이 focus 됐을 때의 부모의 상태를 설정할 때
form : hover input : focus { } : form이 hover상태가 되고, input이 focus인 상태일 때 input에 적용할 설정

input::placeholder { } : placeholder만 꾸미고 싶을 때
p::selection { } : 텍스트를 클릭해서 선택했을 때의 설정
p::first-letter { } : 텍스트에서 맨 첫글자만 설정하고 싶을 때

input[type = "password"] { } :  input중에 type이 password인 input을 설정할 때