궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/CSS

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

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

CSS에서 많이 사용하는 Pseudo-elements 3가지에 대해 간단하게 알아보도록 하겠습니다.

Pseudo-elements

pseudo-elements는 실제로 존재하는 element는 아니지만, 스타일링을 할 수 있게 해 줍니다. 

::placeholder

::placeholderplaceholder의 스타일을 제어할 수 있습니다.

::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

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

developer.mozilla.org


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

 

읽어주셔서 감사합니다🤟


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.