728x90 SMALL css 가상클래스2 [CSS] 순서를 만드는 가상클래스(nth-child, nth-of-type, first-child, last-child * nth-child클래스 이름을 사용하지 않고, nth-child를 사용하여 각 div의 순서를 지정하여 css를 적용하였다. 각 div에 설정한 color가 정상적으로 적용되는 것 확인. html에 h2 태그를 추가해 보았다. 태그 요소와 상관없이 가장 첫 번째 태그인 h2를 1번째로 인식하기 때문에 첫 번째 사각형에 red가 적용된 것을 확인할 수 있다.이 문제는 nth-of-type으로 해결할 수 있다. * nth-of-typenth-of-type은 div 태그임을 확인 및 반영하기 때문에 h2가 아닌 div에 색상이 적용되었다. * first-child, last-childfirst-child는 첫 번째 태그에만 적용, last-child는 마지막 태그에만 적용하고 싶을 때 사용한다. 첫 .. 2024. 7. 28. [CSS] 가상클래스 - 마우스 오버 효과(hover, transition) 마우스를 올리면 :hover로 디자인이 변경되고, transition으로 애니메이션 효과가 들어간다. 실습 1a 태그의 href를 비워놓으면 나중에 제이쿼리가 작동하지 않기에, #none을 작성해 두는 게 좋다. transition 속성은 :hover가 아닌 곳에 작성해야 한다.(a 태그는 body 태그의 color를 따르지 않는다.) 마우스를 올린 곳에 효과가 적용되는 것을 확인. 실습 2 마우스를 올리면 0.5s 동안 서서히 검은색으로 바뀌고 마우스를 빼면 0.5s동안 원래대로 돌아간다. 2024. 7. 27. 이전 1 다음 728x90 LIST
