contenteditable 속성을 접했을 수도 있습니다. 많은 곳에서 사용됩니다. 텍스트 영역과 같은 것보다 훨씬 더 나은 대안입니다. 모든 div에 contenteditable="true"를 추가하면 입력 필드처럼 작동합니다. 이 문서에서는 기본적으로 자리 표시자 속성을 지원하지 않으므로 텍스트에 자리 표시자를 추가하는 방법을 보여 드리겠습니다.

필요한 코드

div[contenteditable] {
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

이것이 필요한 코드의 전부입니다! 그러나 CSS에만 추가하면 작동하지 않습니다. HTML에 자리 표시자 속성을 추가하고 div가 표시되는지 확인해야 합니다.

전체 코드/예제

HTML

CSS

div[contenteditable] {
  /* Basic styles */
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  background: #292929;
  color: #fff;

  /* Placeholder code */
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

그게 전부입니다. 도움이 되셨기를 바랍니다!