whatisthis?
html) 가상 요소(Pseudo-element)와 가상클래스(Pseudo-class) 본문
가상 요소(Pseudo-Element)
가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,
존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함.
::first-line | 요소의 텍스트 중 첫 줄 |
::first-letter | 요소의 첫번째 글자 |
::before | 요소의 컨텐츠 시작부분 |
::after | 요소의 컨텐츠 끝부분 |
::selection | 요소의 텍스트 중 선택된 영역(drag) |
::placeholder | input 필드 힌트 텍스트인 placeholder |
cf> 가상 클래스는 가상 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용한다.
selector::pseudo-element { property: value; }
-> 단일 콜론(:) 대신 이중 콜론(::)을 사용하여 의사 클래스와 의사 요소를 구별해야 함.
___
가상 클래스
선택한 요소가 특별한 상태여야 만족할 수 있음.
예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있음.
syntax>
selector:pseudo-class { property: value; }
예제>
button:hover { color: blue; }
대표적인 가상 클래스 예.
:link | 방문 안한 링크 |
:visited | 방문한 링크 |
:active | 링크 누를때 |
:hover | 링크에 마우스 올릴때 |
:focus | 요소가 포커스될때 (키보드 or 문자입력양식) |
:first-child | 요소의 첫번째 자식요소 |
:first-line | 블록 요소 문단의 첫번째 줄 |
:first-letter | 블록 요소 첫줄에 첫번째 문자 |
:before | 요소 내용 앞에 추가할 태그 지정 (content 속성 필요) |
:after | 요소 내용 뒤에 추가할 태그 지정 (content 속성 필요) |
REFERENCE
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
'WEB STUDY > HTML,CSS' 카테고리의 다른 글
HTML 훈련 - (3) Feature Box (0) | 2021.10.20 |
---|---|
HTML 훈련 - (2) Google Search Result Item (0) | 2021.10.19 |
html) a href="#"의 용도 (0) | 2021.10.19 |
HTML 훈련 - (1) Ad Banner (0) | 2021.10.18 |
HTML) HTML 기초 下-(2) ( Doctype , Structure / Style, Script / Meta ) (0) | 2021.10.15 |