attribute1

attribute2

attribute3

17. display: none / visibility: hidden

둘다 사용자 눈에 안보이는건 똑같지만

• display: none

  • 영역조차 사라짐

• visibility: hidden

  • 영역은 살아있고 사용자 눈에 보이지 않음
  • a태그조차 사라짐

• opacity: 0 (지양)

  • a태그는 살아있기 때문에 사용자에게 혼란을 줄 수 있음

18. transition

• opacity랑 주로 같이 쓰임

• transition: opacity/all .3s linear

                   대상        시간   속도그래프
  

  → all 대상을 0.3초동안 linear한 그래프의 속도로 변하게 할거야

• 속도그래프에는 linear, ease-in, ease-out이 있음

a:hover{transition: all .5s linear}

19. 가상요소

• 실제 html에는 없고 style에만 존재
• ::after{content: ''} → 글자 뒤에
• ::before{content: ''} → 글자 앞에
• inline 요소라 길이값 없음
• inline-block 써줘야 눈에 보임