가상클래스
- 가상 클래스는 별도의 class를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있다.
- 가상 요소와 함께 외부 요인 관련 요소에 스타일을 적용할 수 있다.
가상요소
- 가상 클래스 처럼 선택자에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일할 수 있습니다.
- 가상 요소는 inline 요소이므로 특정 영역을 갖기 위해 css에 display:block을 사용해야 한다.
::before, ::after
- 가상 선택자는 꾸밈을 위해 의미없는 태그를 더 추가해야 될 때 태그 대신 가상으로 처리해주는 css 기능이다.
- content를 사용해 CSS상에서 html 컨텐츠를 삽입할 때 사용합니다.
::before - 해당 태그의 앞에 놓여진다.
::after - 해당 태그의 다음 위치에 놓여진다
CSS 가상 선택자는 언제 사용할까?
- 목록형 꾸밈
- 버튼형 꾸밈
- 간단한 아이콘 만들기(닫기,화살표)
- 이미지 아이콘을 넣고 싶을 때
- 꾸밈 한글을 넣고 싶을 때(tag의 #, 콤마 등)
예시
li {
list-style : none;
float: left;
padding: 0 15px;
}
li::after{
content: "|"
float: right
color: #ccc
}
Hi!