
CSS) States (active, hover, focused, visited selector)
2020. 10. 30. 00:23
Frontend
active 클릭을 할때 색깔이 바뀌게 하기 hover 마우스가 대상 위에 있을 때 focus 키보드로 있을 때 작용( hover 는 마우스가 있을 때) visited 링크있을 때만 사용가능 링크를 누루고 나면 적용 복수개 적용 focus-within Input들 중 하나가 focused가 되면 form의 모습을 바꾸는 것 form:hover input form이 호버가 되었을때 input의 배경색이 sienna form이 호버가 된 상태에서 input이 focused가 되는 것

CSS) Pseudo Selector-2 ( attribute selector)
2020. 10. 29. 23:40
Frontend
형제인데, 바로 옆이 아닌 것을 선택할 때 1) p span 2)p > span 3)p + span 4)p ~ span attribute selector optional 과 required attribute name이라는 단어를 포함한 모든 input ~ 는 contain 이라는 의미 그밖에 * all, 또는 포함하는 ~ contain ^ start (로 시작하는) $ end ( 로 끝나는)

CSS) Combinator(부모, 형제, 자식 셀렉트)
2020. 10. 29. 23:35
Frontend
부모 안에 있는 자식 태그를 선택할 때 p tag 안에 있는 span 찾기 2번째 경우 바로 밑 자식을 선택할 때 3번째 경우 p 안에 있는 것이 아니라 p 옆에 있는 span을 제어하기 즉, 형제를 찾는 것 1) div span : div 속 span을 의미합니다. span이 div의 direct children(직접 연결된 자식 요소)이 아니어도 작동합니다. (7:03부터 설명 나옵니다.) 2) div > span : span이 div의 direct children임을 의미합니다. 이땐 direct children이 아니면 작동하지 않습니다. 3) div + span : div와 동등한 위치에 있는 span을 의미합니다. 자식 요소도, 부모 요소도 아닌 것이죠. 예를 들면, 이 해당됩니다. 는 해당되..

CSS) Pseudo Selector ( first-child, last-child, nth-child(n), 2n selector)
2020. 10. 29. 15:33
Frontend
pseudo selector last-child first-child nth-child(n) even odd 2n 2n + 1 3n+1