opacity / transition

rgba : rga값(0,206,203)에 뒤에 알파채널 추가한거

           0 ~1 사이값 (0,342,34,0.2) 1로 갈수록 진해짐 

           background-color에만 적용됨 

헥스코드에서는 맨뒤에 00~ff 사이값 넣으면 투명도 적용됨

opacity : 다른 속성처럼 따로 지정(opacity : 0.4)

                위에랑 똑같이 1로갈수록 진해짐

                전체 요소가 다 영향을 받음(rgba랑 다른점)

 

 

transition : 애니메이션 효과 라고 생각하면됨

transition:(하고싶은 속성) (변환효과까지 바뀌는데 걸리는 시간) (다시 돌아오는 시간) 

hover랑 흔하게 같이씀

모든 속성 다 때려넣지말고 하나씩 설정해놓는게 나중에 코드 수정할때 편함

 

+

 

This is because .channel is set to display: inline-block; which means vertical alignment is honoured. The default vertical alignment for inline elements is baseline. When you hover over the li you are changing .info to display: block; which means the baseline is different.

To fix this add vertical-align: top; to .channel, it'll ensure that .channel is always aligned to the top of the parent.

연습하면서 div를 inline-block으로 설정하고 네번째 div에만 hover를 걸었는데 다 바뀌길래 찾아보니까 저렇다고함... vertical-align top으로 바꾸니 하나만 바뀜 

 

position은 아직 어려움...