가상 클래스(의사 클래스)
- 별도의 class를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있는 것
- 즉, 가상 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용
- 예를 들어 :hover는 사용자가 선택자에 의해 지정된 요소 위를 맴돌(hover) 때 스타일을 적용한다.
- 가상 클래스(pseudo-class)는, 가상 요소(pseudo-elements)와 함께, 문서 트리의 콘텐츠 뿐만 아니라, 탐색기 히스토리 (가령, :visited), 콘텐츠 상태(일부 폼 요소의 :checked 같은) 혹은 마우스 위치 (마우스가 요소 위인지 알 수 있는 :hover 같이)처럼 외부 요인(factor) 관련 요소에 스타일을 적용할 수 있다.
내가 사용했던 가상클래스
- input radio button :checked
- elements select :first, :first-child, last-child, nth-child()
- mouse hover :hover
- input placeholder 제거할때 :focus
가상요소(의사요소)
- 가상 요소는 가상 클래스와 달리 요소의 특정 부분에 스타일을 적용할 때 사용합니다
- 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능
- 예를 들어, ::first-line 가상 요소는 선택자에 의해 지정된 요소의 첫 줄만을 대상으로 한다, 또는 요소의 내용 앞 또는 뒤에 내용 삽입
내가 사용했던 가상요소
- input의 그림자글자 ::placeholder
:after :before
가상선택자는 꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때,
태그 대신에 가상으로 처리해 주는 쓸모 많은 CSS기능이다.
만일 HTML구조에서 필요한 내용이라면 가상선택자로 만들면 안된다.
- 가상선택자를 사용할 때
의미 없는 태그를 쓰지 않도록 도와줌, 태그 최소화
- 목록형 꾸밈
- 버튼 꾸밈
- 간단한 아이콘 만들기(닫기버튼, 화살표 등)
*도형을 만들때는 보여지는 픽셀두께가 세밀하지 않기 때문에 비주얼적으로 중요한 아이콘이면 이미지로 사용 추천 - 이미지 아이콘을 넣고 싶을때
- 꾸밈 한글을 넣고 싶을 때(tag의 #, 또는 콤마 등)
.class-name li:before{
content:'';
width: 3px;
height: 3px;
}
- :before 해당 태그의 앞에 놓여진다
- :after 해당 태그의 다음 위치에 놓여진다
- 가상선택자는 부피가 없으므로, 아이콘을 표현할 땐 꼭 너비와 높이를 정해주어야 한다
- transform을 쓸 때는 블럭요소(display:block 또는 display:inline-block)가 되어야 적용 가능하다
- ::before와 ::after를 쓸 땐 content라는 속성이 꼭 필요하다
content:''
- HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주는 가짜속성
- 가상선택자에 필수로 들어가는 요소. 작은따옴표 안에는 텍스트 내용을 넣고, 없으면 작은 따옴표만 넣기,
- 종류
normal : 아무것도 표시하지 않는 기본값
string : 문자열 생성
image : 이미지, 비디오를 불러올 수 있음 (크기 조절 불가)
counte : 순서를 매길 수 있음(counter-increment, counter-reset 함께 사용)
none : 아무것도 표시하지 않음
attr : 해당속성의 속성값 표시
h1::after {
content: url(smiley.gif);
}:before와 ::before차이
차이는 없다. 오히려 더블 콜론::before을 쓴다면 ie8 이하 버전은 적용이 되지 않는다
css2에서는 콜론이 하나였다가, css3에는 더블클론으로 바뀌었다
가상선택자 적용이 안되는 경우
- form,input...태그와 이미지태그는 가상선택자가 적용되지 않는다
가상선택자 이슈 - ie7 이하버전은 지원하지 않는다.
- ie8 이하버전은 더블콜론(::)이 적용되지 않음
*컨테이너 태그 : 태그 자체에는 의미가 없으며 단순히 요소를 묶기 위한 용도로 이용.
스타일을 주기 위해서나 또는 서버에서 보내는 데이터를 담기 위한 목적으로 이용.
:D