PlaceHolder

입력 요소에 어떠한 정보를 기제하는지에 대한 간략한 정보를 제공합니다.

특징

입력 요소에 값이 없는 경우에는 PlaceHolder의 내용이 출력됩니다. 하지만, 값이 입력되는 순간 PlaceHoler 설명이 사라지는 단점이 있습니다.

PlaceHolder의 단점을 개선하기 위하여 Floating Lable 형태로 대체하여 만들기도 합니다.

스타일

PlaceHolder는 ::placeHolder 가상 선택자를 이용하여 제한되지만 CSS 스타일을 수정할 수 있습니다.

Floating Lable 기법

input 요소의 placeholder의 단점을 개선하기 위하여 별도의 span 요소로 입력 정보를 설정하고, 입력요소가 focus가 될때 floating을 통하여 설명정보의 위치를 변경하는 방법입니다.