요즘 아이폰이나 안드로이드를 사용하는 유저층이 많아지면서, 모바일 웹사이트를 구축하는 경우도 예전보다 훨씬 많아진 것 같습니다.
여러 모바일 기기의 OS 중에서도 시장점유율이 높은편인 iOS나 안드로이드의 경우엔, 같은 webkit 엔진 기반의 모바일 웹 브라우저를 사용하고 있어서 화면 렌더링에 큰 차이를 보이지 않고, 제한적이지만 html5도 지원하고 있어 모바일 웹사이트에도 어느정도 활용성이 있다고 판단되어 html5에서 새롭게 추가된 placeholder 속성에 대해 소개하고자 합니다.

웹 페이지에서 텍스트 인풋박스 <input type="text"> 를 출력할 때 보통 인풋박스의 옆에 Guide Text를 명시하여 퍼블리싱을 하곤 합니다.

하지만, 모바일 기기의 스크린은 일반적인 모니터보단 훨씬 작기때문에, 공간 절약이 필요할 것 같아요.
예전엔 아래의 예와 비슷하게 출력(현재 이 블로그의 댓글 입력폼이나 검색폼에서도 jQuery를 활용하여 퍼블리싱되어 있음)하여 Hint Text를 보여주고 싶을 경우 JS를 활용해야 하였습니다만, html5에서 정식으로 지원하는 placeholder 태그로 간단하게 같은 효과를 낼 수 있습니다.

<input type="text" placeholder="아이디" />

* 해당 태그는 html5를 지원하지 않는 브라우저(ie9 이하버전 등)에선 표현되지 않습니다.

출처: http://slides.html5rocks.com/#new-form-types