가상 요소
요소의 특정한 부분에 CSS 속성을 적용할 수 있도록 선택자에 추가하는 키워드입니다.
요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 하나의 하위 요소처럼 사용할 수 있어서 가상 요소라고 합니다.
가상 요소 리스트
::before: 요소 내용 앞쪽에 새 컨텐츠를 추가합니다.::after: 요소 내용 끝에 새 컨텐츠를 추가합니다.::selection: 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택합니다.::marker: 목록 요소(li) 앞에 붙는 마커를 선택합니다.::first-letter: 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택합니다.::first-line: 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택합니다.
::before, ::after만 새 컨텐츠를 추가하는 가상 요소이고, 나머지는 콘텐츠의 특정 영역을 선택하는 가상 요소입니다.
가상 요소 작성 방법
가상 요소는 앞에 콜론(:)을 2개 붙여서 표기합니다.
가상 클래스는 콜론을 1개 붙여서 표기합니다. CSS1, CSS2 때는 가상 요소도 콜론 1개로만 표시했었는데 CSS3에 오면서 가상 클래스와 가상 요소를 구분하기 위해서 콜론을 2개 붙여서 표기하기 시작했습니다.
:before로 작성해도 가상 요소가 정상적으로 작동하는 이유는 웹 브라우저가 콜론 1개와 2개의 표기를 모두 지원하기 때문입니다.
그래도 가상 요소는 콜론을 2개 붙이는 것이 CSS3의 표준 표기 방법입니다.
span::before {
content: "";
width: 120px;
}위처럼 가상 요소는 선택된 요소에 의존적인 키워드입니다.
그렇다면 가상 클래스는 무엇일까요? 🤔
가상 클래스
사용자가 요소에 마우스 포인터를 올리거나 클릭하는 등 특정 이벤트마다 스타일을 적용할 수 있도록 선택자에 추가하는 키워드입니다.
개인적인 경험으로는 가상 요소보다는 가상 클래스를 더 많이 사용하는 것 같습니다.
특정 부분에 CSS 속성을 정하는 가상 요소와 달리 해당 요소의 특정 이벤트 시점에 스타일을 적용하는 것이 가상 요소와 가상 클래스의 가장 큰 차이점입니다.
대표적인 가상 클래스 리스트
:link- 방문한 적이 없는 링크:visited- 방문한 적이 있는 링크:hover- 마우스를 롤오버 했을 때:active- 마우스를 클릭 했을 때:focus- 포커스 되었을 때 (input 태그 등):first- 첫번째 요소:last- 마지막 요소:first-child- 첫번째 자식:last-child- 마지막 자식:nth-child(2n+1)- 홀수 번째 자식
가상 클래스를 사용하면 문서 트리 콘텐츠 뿐만 아니라 탐색기 히스토리(:visited 등), 콘텐츠의 상태, 마우스의 위치와 같은 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.
가상 클래스 작성 방법
가상 클래스는 앞에 콜론(:)을 1개 붙여서 표기합니다.
button:hover {
color: blue;
}정리
기본에 충실하자.. 😎
