[HTML] 텍스트 입력전 회색글씨 - placeholder

텍스트에 값을 입력하기 전에 회색글씨로 무엇을 쓰라고 알려주는 경우가 있다.

벨로그 작성시 입력전에도 이렇게 나온다.

처음에는 이름을 몰라서 '텍스트 입력전 회색'으로 검색해서 찾았다.
속성 이름은 placeholder 라고 한다.

요소안에 해당 속성을 넣어주면 된다!

요소안에 넣어 사용한 예시

<textarea name="content" id="content" class="form-control" rows="10" 
placeholder="레시피 평가는 로그인 상태에서만 가능합니다."
onfocus="placeholder=''" 
onblur="placeholder='레시피 평가는 로그인 상태에서만 가능합니다!!'">
</textarea>            

관련된 속성은 위 3가지.

placehoder = "출력할 문구를 입력"
onfocus ="placehoder='해당 입력칸을 눌렀을때 나타낼 문구'" // 위 코드는 ''를 넣어 문구가 사라지게했다.
onblur ="placeholder='다른 곳을 클릭했을때 출력할 문구를 입력'"

즉, 위 코드의 경우 영상처럼 처음에는 '레시피 평가는 로그인 상태에서만 가능합니다.'라는 문구가 써있고, 해당 요소를 누르면 ''로 되며, 현재 입력창 외 다른 요소를 클릭하면 다시 '레시피 평가는 로그인 상태에서만 가능합니다!!' 가 나타난다.