CSS 의 선택자(selector):

pseudo-class(가상 클래스) 의 개념이 참 헷갈렸는데 이 블로그의 글을 읽고 단박에 이해되었다.
간단히 정리하면, CSS 에서 효과를 줄 HTML 을 선택하는 방법들을 CSS 선택자, 즉 selector 라고 하며, pseudo-class 는 이러한 선택자들 중 하나이다. 해당 블로그의 글을 참고하여 MDN 공식문서를 정리한 내용에 따르면, 선택자들은 아래와 같이 크게 4분류로 나뉜다.

• Basic Selectors:
  1) universal selctor: "*"
  2) type selector: "type" (ex. input)
  3) class selector: ".classname"
  4) ID selector: "#IDname"
  5) Attributes selector : "[ attr = value ]"

• Grouping Selector: ","

• Combinator:
  1) ""
  2) ">"
  3) "~"
  4) "+"
  5) "||"

• Pseudo:
  1) ":"
  2) "::"

  Pseudo-class(가상 클래스) 는 마지막 4번째 Pseudo selector 의 1) : 에 해당하는 부분이다. pseudo(가상) 라는 말에서 알 수 있듯이, HTML 내에는 존재하지 않는 가상의 상태를 선택하는 것이다. 예를 들어 pseudo-class 중 하나인 hover 상태는 HTML 에 표시한 class 가 아니더라도, CSS 에 '만약 그러한 클래스가 존재한다면', 이라는 가정하에 어떠한 효과를 줄 지 지정하는 것이다.

  Pseudo-element(가상 요소) 역시 Pseudo-class 와 비슷하게 HTML 에 존재하지 않는 요소를 존재한다는 가정하에 지정하는 방법을 말한다. Pseudo 파트의 2) 에 나와 있듯 :: 로 지정할 수 있다. 예를 들어 a::after 은 html 내의 a 의 마지막 자식으로 새로운 요소를 생성해낼 때 쓴다. 즉, 아직 html 에 내에 존재하지 않는 요소를 만들어내는 것이다.

CSS: transition

pseudo-class 에 따로 CSS 의 속성(property)을 주었다면, 해당 property 변화가 나타날 때 좀 더 부드러운 움직임을 줄 수 있도록 한다.(@keyframe 으로 애니메이션을 만들고, animation 으로 효과를 주는 것과 같은 맥락이다.)

animation 과 비슷하게, 다음과 같은 속성들을 가지고 있다:

• transition-property: 효과를 줄 속성 이름 ( ex. font-size )
• transition-duration: 효과 지속 시간 (ex. 0.5s)
• transition-timing-function: 효과 나타나는 스피드 조절 (ex. ease-in-out)
• transition-delay: 효과 변화 요청을 받은 후 실제 효과 실행까지 지연 시간 (ex. 2s)