HTML의 <textarea> 요소에서 placeholder(자리 표시자) 속성은 여러 줄 텍스트 입력란 안에 미리 보여지는 안내 문구를 설정하는 데 사용됩니다. 사용자가 아직 아무 내용도 입력하지 않았을 때 "이름을 입력하세요", "휴대폰 번호를 입력하세요", "100자 이내로 작성해 주세요"처럼 어떤 값을 입력해야 하는지 힌트를 제공하는 역할을 합니다.
사용자가 입력을 시작하면 자리 표시자 텍스트는 자동으로 사라지므로, 실제 값이 아니라 단순한 안내용 힌트로만 동작한다는 점을 기억하세요.
문법(Syntax)
placeholder 속성의 기본 문법은 다음과 같습니다.
<textarea placeholder="text">
여기서 text는 textarea에 표시하고 싶은 힌트 문구를 의미합니다.
예제
이제 <textarea> 요소의 placeholder 속성을 실제로 구현한 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <body> <h2>면접 질문</h2> <p>Q1</p> <textarea rows="6" cols="70" placeholder="에디터 직무에 지원하게 된 이유는 무엇인가요? (100자 이내)"> </textarea> <p>Q2</p> <textarea rows="6" cols="70" placeholder="출판 관련 경력이 있으신가요? (100자 이내)"> </textarea> </body> </html>
실행 결과
예제 설명
위 예제에서는 두 개의 textarea를 만들었습니다.
<p>Q1</p> <textarea rows="6" cols="70" placeholder="에디터 직무에 지원하게 된 이유는 무엇인가요? (100자 이내)"> </textarea> <p>Q2</p> <textarea rows="6" cols="70" placeholder="출판 관련 경력이 있으신가요? (100자 이내)"> </textarea>
각 입력란에 자리 표시자 텍스트를 표시하기 위해 placeholder 속성을 사용했습니다. 예를 들어 다음과 같습니다.
placeholder="에디터 직무에 지원하게 된 이유는 무엇인가요? (100자 이내)"
참고 사항
- rows / cols 속성: 각각 textarea의 세로 줄 수와 가로 글자 수를 지정하여 입력란의 크기를 조절합니다.
- 접근성: placeholder는 화면 낭독기 사용자에게 항상 잘 전달되지 않으므로, 중요한 라벨 정보는 반드시 <label> 요소와 함께 사용하는 것이 좋습니다.
- 스타일링: CSS의 ::placeholder 선택자를 활용하면 자리 표시자 텍스트의 색상이나 글꼴 등을 자유롭게 꾸밀 수 있습니다.