HTML/CSS③

#.마우스 오버 효과(hover, transition)

:마우스를 올리면 :hover로 디자인만 변경되고 , transition으로 디자인 변경할 때 애니메이션 효과가 들어감.

 

a{

  color:#000;

  transition:0.5s;      // :hover가 아닌 곳에 넣어줘야 마우스 오버 , 마우스 빠질 때 모두 적용

}

a:hover{

  color:dodgerblue;

  text-decoration:underline

 }

 

 

#.순서를 만드는 가상 클래스(nth-child, nth-of-type, first-child, last-child)

:클래스 네임을 선택하지 않고, 순서를 정하는 가상 클래스  , 내가 원하는 요소를 선택하는 것

first-child  |  last-child  |   nth-child(숫자) 

 

first-child  |  last-child : () 괄호가 필요하지 않는다.