🌿 커스텀 달력 - 플레이스 홀더

다양한 선택자

위에서 사용했던 -webkit-calendar-picker-indicator 선택자 외에도 다른 선택자가 존재합니다.

-webkit-datetime-edit-text : 날짜 입력 필드의 텍스트 부분 스타일링

-webkit-datetime-edit-year-field : 날짜 입력 필드에서 연도 스타일링

-webkit-datetime-edit-month-field : 날짜 입력 필드에서 월 스타일링

-webkit-datetime-edit-day-field : 날짜 입력 필드에서 일 스타일링

이를 통해 입력필드의 다양한 부분을 개별적으로 스타일링 하거나 숨길 수 있게 됩니다!

content: attr(변수)

content 속성에 attr() 함수를 사용해서 HTML 요소의 특정 속성 값을 가져와 스타일에 사용할 수 있습니다.

사용 방법에 대해서 알아볼까요?

content: attr(attr-name); // attr-name 은 가져오고자 하는 HTML 요소 속성 이름

attr() 함수는 주로 ::before 및 ::after 가상 요소에서 사용되어, 요소의 특정 속성 값을 기반으로 콘텐츠를 동적으로 생성하는데 유용합니다.

//html
<div data-title="Hello World" class="example">Example</div>

//css
.example::after {
    content: attr(data-title);
}

// example 요소 뒤에 "Hello World" 라는 텍스트가 추가됩니다.