[CSS] 가상클래스로 placeholder 흉내내기

노션 클론 프로젝트를 진행 중에, 다음과 같은 기능을 구현하면서 정리한 글입니다.

contentEditable="true" 어트리뷰트를 설정하면 해당 엘리먼트를 마치 input 처럼 편집할 수 있습니다.

<div contentEditable="true"></div>

만약 placeholder 를 설정하고 싶다면 어떻게 할까요? 단순히 placeholder 어트리뷰트를 적용하면 될까요?

placeholder 어트리뷰트는 input이나 textarea 태그인 경우에만 표시할 수 있습니다.

즉, 단순히 placeholder 어트리뷰트를 적용한다고 해서는 동작하지 않습니다

// bad
<div contentEditable='true' placeholder='명령어 사용시 "/"를 입력하세요'></div>

input textarea 그 외에 엘리먼트에는 placeholder 어트리뷰트가 적용되지 않기 때문에, CSS 가상클래스로 문제를 해결해야합니다.

CSS 가상클래스로 placeholder 흉내내기

다음 가상 클래스를 사용해서 placeholder를 흉내낼 수 있습니다

• :empty
• :before

:empty 자식, 텍스트가 없는 요소를 선택합니다.

:before 의사 요소를 해당 선택자의 자식으로 생성합니다. 보통 content와 함께 사용됩니다

다음과 같은 CSS 코드로 placeoholder를 흉내낼 수 있습니다.

[contenteditable="true"]:empty:before {
   content: attr(placeholder);
}

1. contenteditable=true 인 요소 중에서
2. :empty 아직 텍스트가 작성되지 않은(비어있는) 요소를 선택하고
3. :before 해당 요소의 첫 자식으로
4. attr() 함수로 가져온 placeholder 어트리뷰트의 값을
5. content로 설정합니다.

이제 CSS의 가상클래스로 placeholder 를 흉내낼 수 있습니다