[CSS] 의사 전달 코드 이해(hover, active, focus, visited, before, after)

의사 전달 코드(Psuedo-code) : 가상의 코드로써, 수행될 내용을 인간의 언어로 간략히 설명해 놓은 것

• 마우스를 올렸을 경우 : .block_01:hover { }
• 마우스 버튼을 클릭했을 경우 : .block_01:active { }
• 페이지를 방문한 적이 있는 경우 : .block_01:visited { }
  • 한 번 사용하면 새로고침하거나 껐다가 켜도 이미 적용된 상태로 나타남
• 초점이 맞춰진 경우 : .block_01:focus { }
• 가상의 요소를 생성하여 처리해야 하는 경우
  • 가상코드 : 실제로 존재하는 내용은 아니지만 눈에 보이게 할 수 있음
  • 요소의 앞에 존재하는 가상의 코드 ⇒ .block_01::before {content : “앞에 들어갈 내용” ; }
  • 요소의 뒤에 존재하는 가상의 코드 ⇒ .block_01:after {content : “뒤에 들어갈 내용” ; }
  • 앞과 뒤에 둘 다 넣을 수 있음
  • 시작/끝의 형태를 가진 요소에서만 사용 가능
  • 반드시 속성 중에 content : “”; 필요