[CSS] Pseudo-elements (placeholder, selection, first-letter)

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.

적용 가능한 스타일 속성

::first-letter (:first-letter) - CSS: Cascading Style Sheets | MDN

---

오늘은 이렇게 CSS에서 많이 사용하는 Pseudo-elements 3가지에 대해 간단하게 알아보았습니다.

 

읽어주셔서 감사합니다🤟