[CSS]#10 state, pseudo elements

element state

*모든 state의 CSS를 수정하면 가지고 있던 디폴트 값을 잃어버려서 처음부터 다시 꾸며야 합니다.

▶ :active ->대상을 누르고 있을 때(마우스로 클릭 유지)

▶ :hover ->마우스 커서가 대상 위에 있을 때

▶ :focus(active와 같은 거 같지만 다름) -> active가 마우스로 클릭됐다면, focus는 키보드로 선택되었을 때를 말함 

예시로, 회원가입을 할 때, 이름, 아이디, 비밀번호 입력칸에 키보드 Tab키를 누르면 다음 작성칸으로 넘어가는 것처럼 

▶ :visited -> 링크에만 적용, 방문했던 적이 있는 링크의 색상이 다르게 보이는 것도 visited의 효과 때문

▶ :focus-within -> focused인 자식을 가진 부모 엘리먼트의 상태

고로 이 효과는 부모 엘리먼트에 써야 함 부모가 가지고 있는 자식요소가 focused가 됐을 때 부모의 모양이 변함

e.g.) form:focus-within {

border-color:teal; 

} //여기서는 form이 focus되는 자식 요소를 가진 부모 셀렉터가 되겠죠

☆자식요소 상태 변함->부모의 모양에 영향

▶반대로, form:hover input{}; 이런 식으로 부모요소가 hover상태가 되면 자식요소의 모양을 바꾸게 할 수도 있습니다.

☆부모요소 상태 변함(부모의 state에 따라) ->자식의 모양에 영향

 

▶state을 여러개 나열할 수도 있는데 일종의 조건문으로 생각하면 쉽다

예로, form:hover input:focus{} 라는 코드가 있다면 앞에 form태그가 hover되고 input태그가 focus될 때에만 중괄호 안의 효과가 적용된다는 뜻이다. 둘 다 무조건 충족돼야 한다.

 

pseudo elements (위의 state와 차이점이 있다면 :: <- 2개) 

▶ ::placeholder ->플레이스 홀더의 컬러를 변경하거나 할 수 있음

▶ ::selection -> 마우스 커서로 select 즉, 드래그 했을 때 드래그한 부분의 데코레이션을 따로 지정해 줄 수 있음 

▶ ::fisrt-letter -> 잘 사용할 진 몰라도 문장의 맨 앞 글자에만 CSS효과를 주고 싶을 때 사용

▶ ::first-line -> 위의 first-letter과 비슷하지만 첫번째 레터가 아니라 첫번째 라인 전체에 적용