15일 TIL

오늘의  CSS

Peseudo Selector 사용

<div></div>를 사용 할 경우 여러개의 div가 있을 경우에 일일이 id나 class를 주는게 아니라 

style쪽에 div:first-child 나  div: last-child를 이용해 해당 자식을 변경해 줄 수 있게 하는 방식이 있다.

또 하나는 여러개의 span이 있을 경우에는 위의 방법과 유사하게 사용 할 수 있다.

span:nth-child(2) 이것은 2번째에 있는 것을 변경해준다는 뜻이다. span:nth-child(even)은 짝수 자리를 변경 하게 해준다.

 span:nth-child(odd)는 홀수 자리를 변경해준다.

이렇듯 일일이 id나 class를 주지 않고도 좀 더 쉽게 변화를 줄 수 있는 방법이 있다.

transition 기능은 색을 그냥 한번에 효과를 주는 것이 아니라 시간을 정해주고,

그 시간안에 천천히 효과를 눈으로 보여주게 하는(?)기능이다.

transition: background-color 2s ease-in-out 을 주고 따로 hover를 주면 정해진 hover에 애니메이션 효과를 주게되는 기능이다.