HTML5 자리 표시자(Placeholder) 속성이란?
HTML5에는 placeholder(자리 표시자)라는 새로운 속성이 도입되었습니다. 이 속성은 <input>과 <textarea> 요소에 사용할 수 있으며, 사용자가 해당 필드에 어떤 값을 입력해야 하는지 미리 힌트를 보여주는 역할을 합니다.
다음은 자리 표시자가 실제로 어떻게 표시되는지 보여주는 예시입니다. 이메일 입력란에 나타나는 email@example.com이 바로 자리 표시자입니다.
기본 사용 예제
아래 코드를 실행하면 placeholder 속성이 어떻게 동작하는지 직접 확인할 수 있습니다.
<!DOCTYPE HTML> <html> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="email" name="newinput" placeholder="email@example.com"/> <input type="submit" value="submit" /> </form> </body> </html>
CSS로 자리 표시자 색상 변경하기
자리 표시자의 기본 회색 텍스트 색상은 CSS를 사용해 자유롭게 변경할 수 있습니다. 다만 브라우저마다 지원하는 선택자가 다르기 때문에, 모든 브라우저에서 동일하게 동작하도록 하려면 벤더 접두사가 붙은 여러 선택자를 함께 작성해야 합니다.
::-webkit-input-placeholder— WebKit·Blink 기반 브라우저 (Chrome, Safari, Edge 등):-moz-placeholder— Mozilla Firefox 4~18::-moz-placeholder— Mozilla Firefox 19 이상
아래 예제는 자리 표시자의 색상을 진한 붉은색(#7F0D10)으로 변경하는 코드입니다.
<!DOCTYPE HTML>
<html>
<style>
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #7F0D10;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #7F0D10;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #7F0D10;
opacity: 1;
}
</style>
<body>
<form action="/cgi-bin/html5.cgi" method="get">
Enter email : <input type="email" name="newinput" placeholder="email@example.com"/>
<input type="submit" value="submit" />
</form>
</body>
</html>알아두면 좋은 팁
Firefox는 자리 표시자에 기본적으로 반투명 효과(opacity)를 적용하기 때문에, 원하는 색상을 정확하게 표현하려면 위 예제처럼 opacity: 1;을 함께 지정해 주는 것이 좋습니다.
또한 최신 브라우저에서는 표준 선택자인 ::placeholder도 지원하므로, 구형 브라우저 호환성이 크게 중요하지 않다면 이 선택자 하나만 사용해도 됩니다. 다양한 환경의 방문자를 고려한다면 표준 선택자와 벤더 접두사 선택자를 함께 선언해 두는 것이 가장 안전한 방법입니다.