2020.04.27 HTML,CSS 수업 내용

- before,after-

div::after{ content:"_"},div::before{content"_"}

after,before:HTML에 100개의 텍스트가 있다고 할 경우에,  각 100개의 텍스트의 앞이나 뒤에 추가 내용을

붙이고 싶을 때, 하나하나 HTML을 수정하지않고  CSS before,after를 활용해 추가해주면 편리하게 할수 있다.

 

 

*after와 before의 display는 inline 이다.*

*before은 태그에 첫번째 자식 after는 막내자식이다.*

 

 

-transition-

=요소가 변할 때 변하는 과정 즉, 애니메이션 효과

ex) div{

           transition: width 1s;} = 돌아갈때 애니메이션 (평소작동)

    

    div:hover>div{

           transition: width 3s} = 발동 애니메이션 (마우스 올렸을 때 작동) 

 

 

*transition 은 시작값과 끝이 명확해야한다*

 

-opacity-

=불투명도

ex) opacity:1  =기본

    opacity:0.5 = 반투명

    opacity:0   = 안보임