CSS_가상 요소와 사용자 지정 속성

가상 요소(pseudo-element)

오로지 스타일을 위해서 의미없는 태그를 추가해야할 때 사용한다.(의미가 있다면 html 태그를 사용하면 되니까!)

보통 before과 after을 많이 사용한다. 꾸밀 태그 뒤에
::before
::after
더블 콜론과 함께 작성하면 해당 태그의 첫 번째 혹은 마지막 자식 요소가 생기는 것이다. (css2에서 콜론이 하나였다가, css3에서는 더블 콜론으로 바뀜.)

이렇게 생긴 가상 요소의 display 기본값은 inline이며, 실제로 존재하는 것처럼 다른 요소들이 인식한다.

<주의할 점!>

• content 속성을 반드시 사용해주어야 한다.
  넣을 내용이 없다면 content=""; 빈값으로라도 남겨줘야 한다.

• img와 같은 no ending tag에는 사용할 수 없다. 닫는 태그가 없기 때문에 안에 자식 요소가 존재할 수 없기 때문이다.

사용자 지정 속성(CSS variables)

CSS에도 재사용을 위해 변수를 사용할 수 있다.

보통 이 변수는 문서 어디서든 사용할 수 있도록 root 안에 설정한다. (변수를 정의한 요소의 자식요소 어디에서든 사용가능)

: root {
  --main-bg-color: brown;
}

사용자 지정 속성의 이름은 위와 같이 두 개의 붙임표로 이름은 시작하고 대소문자를 구분하니 주의해야 한다.

사용할 때는 var() 함수를 통해 접근하면 된다.

.title {
  color: white;
  background-color: var(--main-bg-color);
 }