CSS에서 많이 사용하는 Pseudo-elements
3가지에 대해 간단하게 알아보도록 하겠습니다.
Pseudo-elements
이 pseudo-elements
는 실제로 존재하는 element
는 아니지만, 스타일링을 할 수 있게 해 줍니다.
::placeholder
::placeholder
는 placeholder
의 스타일을 제어할 수 있습니다.
::placeholder {
color: blue;
font-size: 1.5em;
}
See the Pen placeholder by 서근 (@seogun95) on CodePen.
::selection
::selection
은 텍스트를 마우스를 통해 드래그해 선택할 때 나타나는 효과를 제어할 수 있습니다.
p::selection {
color: red;
background-color: yellow;
}
See the Pen selection by 서근 (@seogun95) on CodePen.
적용 가능 스타일 속성
color
background-color
text-decoration
및 관련 속성text-shadow
-webkit-text-stroke-color
-webkit-text-fill-color
-webkit-text-stroke-width
width
::first-letter
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
::first-letter
은 요소의 첫 번째 줄 첫 글자에 스타일을 적용 하지만, 다른 콘텐츠(예: 이미지 또는 인라인 테이블)가 선행되지 않는 경우에만 스타일을 적용할 수 있습니다.
See the Pen Untitled by 서근 (@seogun95) on CodePen.
적용 가능한 스타일 속성
오늘은 이렇게 CSS에서 많이 사용하는 Pseudo-elements
3가지에 대해 간단하게 알아보았습니다.
읽어주셔서 감사합니다🤟
'FRONT-END > CSS' 카테고리의 다른 글
[CSS] 결합/연결자 - Combinators (0) | 2022.10.06 |
---|---|
[CSS] Collapsing-Margin (마진 겹침 현상) (0) | 2022.10.06 |
[CSS] 적용 우선 순위 (1) | 2022.09.05 |
(CSS) display: flex에 여러 요소가 있을때 좌우 정렬 하는 방법 (30) | 2022.07.07 |
이미지 드래그 & 오른쪽 마우스 막는 방법 (38) | 2022.07.05 |